How to Build a NEUMORPHIC JAVASCRIPT CALCULATOR | Javascript Project | GeeksforGeeks

Key Takeaways

okay guys we are live so hello everyone I am Harel Jen and today we are going to build a calculator using HTML CSS and JavaScript so as you can see like it's a not a very big project but yeah it's good for those people who have just started with HTML CSS JavaScript and need a good project who uh which actually acts like you can actually use HTML CSS JavaScript Al together in this project okay so this project is totally for beginners and we are going to actually add some features to this first of all this is just a normal calculator second thing is we'll be adding this Dark theme and light theme switch third thing would be uh like all the buttons would be again functional and the fourth thing would be that I would be adding sound to these buttons that means if you click on this you would hear a sound okay right now I'm recording I'm I'm taking the live session that's why you might not be able to hear the sound but yeah we are going to add audio to this button click so that you know yeah how audio is added okay so we'll all we'll see all of these things and one more thing guys I'll provide the source code also so for getting the source code you can check out my giup profile at the end I'll upload the source code there you would get the repository so uh hi suzan hi Arya hi AB Sati okay hello hello everyone okay let me just show you my G up profile so from here you can get the source code you just need to type github.com /v aj14 and uh there you can check out the repositories here I would upload the repository at the end of this video okay so I'll would show you how to get the Cod code so let's start with the coding part first okay then we'll upload that right so our main goal is to First all create a simple calculator like this and one more thing is we have to add features so you can see according to the theme you can see colors change and also you can see that switch is properly working and also you can see that here I can actually do some operation for example 78 into 9 so you can see that yeah it's just like a normal calculator it works like that okay so yeah this is just for going one uh one step backward like this okay and suppose if it's empty and if I press equal to so you can see nothing happens okay nothing happens just we get zero right so we're going to apply all of this logic using HTML CCS JavaScript so let's begin so first of all guys uh you would need one thing that is you would need vs code so for that you just need to go to your browser and you just need to search for VSS code and it would take you to the official website of vs code the first link uh this is built by Microsoft so this is an ID which we use for U writing code mostly like all of the web development part or if you're talking about languages like python C++ all of them can easily be uh like coded here okay so you can write uh programs for those languages here that's why use this and you can see you can just download this and once you click on this it will download the vs code setup for you so first of all it will download then what you can do is you can just install this by clicking next next next while installing the setup of us code just check all the checkboxes so that you get all the shortcuts which we use okay that's it so mine is already downloaded so I won't continue from here so I would just directly jump into the V code part okay then what you have to do is you have to Simply uh you can go to any folder where you like to create the project so what I'm going to do is I'm simply going to create a folder here so I'll just say new folder okay and I'll just name it something like uh let's let's name it again as new new morphic clock and this is a live session so I'll just make it live okay that's it so here we are going to write the complete source code mainly the three things are here HTML CSS JavaScript and one more thing is an additional file that is the audio file okay so I'll just start writing from here first of all I'm going to say that we have a very basic HTML file so I'll say that it's index do HTML right similarly we have style. CSS similarly guys we have script.js and now what we're going to do is we're going to combine all of these three into index.html file so I'll just type this exclamation sign and then you can see that we got this shortcut okay so this is the boiler plate so I can actually name it as calculator okay and now inside the body let me just say that we have H1 tag and I would just type this and let me just check if it's working or not so for for that what we can do is we can just open this and uh I'll just show this to you so in my browser actually uh it would open something like this so you can see yes we are getting this text that means it's working properly so now what we're going to do is we simply going to write the code for that okay so uh guys for that what we can do is uh we are going to use display Flex also display Flex uh Flex also and display grid also okay so for that first of all here we can see here we can say that uh we need to show an audio okay so I'll just type a comment here and we need to show an audio that means we need an audio tag to actually play an audio so we'll be creating an audio tag and then providing the SRC so uh I'll provide the MP3 format link of this audio which we are using right now so this is actually a button press sound okay so that's it so you will get this when I upload the source code there you would get this I'll share this okay so uh we'll be adding audio later on but right now at the top you can add or at the bottom anywhere you can add so here I'm just going to say first of all we have a division later on we'll add the audio so I'll just say we have a class as calculator okay I'll just give it a class of calculator that's it and guys inside this I would say first of all we have a display of the calculator at the top okay so it would be just a division and inside this we have an input tag okay so here itself I can just say we have a division and then class and I would just name it as display okay display and then guys you can just close this so inside this we need an input tag which takes which shows our inputs okay that means whatever operation you are performing addition subtraction multiplication division or result whatever you are performing you need to get the output right so at the top you're going to create this so guys I'm just going to say we have an input of type equals text uh then you can see that uh it's actually having an ID of suppose result okay and then I would just say it's disabled disabled simply means that you can't write anything directly on pressing this input I would be adding data to this input using my buttons that means the calculator buttons from that I would actually do perform operations okay that's it so right now actually it's not disabled I'm sorry it's read only okay it's read only right that means I'm saying that I can't directly type anything inside this input so you would see that I have this input but if I just press on and if I try to write anything I won't be able to do this because it's only read only okay it's read only that's what is the purpose of read only this is done the top part is done now below this we need to show our buttons okay so we have the display we need to show our buttons but in between that we actually also going to show the toggle button for light theme and dark theme so I'll just say here we are going to say that we have a theme switch okay here we are going to have a theme switch so uh let me just create a theme switch here itself so I'll just say we have a division and I would just say class and I would just say theme and then switch okay so I would just say theme switch inside this we're going to create an switch how what what kind of switch so you can see actually this kind of switch so you can see that we have a switch right if I click on this you can see this is actually a switch okay that's what we call it okay so inside this we are going to create this uh from scratch okay so we are going to say that we have an input tag and then the type of this would be checkbox okay checkbox check uncheck check uncheck okay like that and then guys I would just say it has an ID of theme toggle okay we also called it as a Toggler so theme toggle okay so just create this input tag that's it now guys after this we would also have a label okay so we're going to hide this label show it as a button we'll do that so yeah we are also going to have a label and guys I'm just going to say that it has a uh it it it has a for of which what what you referencing to so I'm referencing to this input so I would just say for for this input okay that's it that means this label is actually reference to this input that's it now I also give this label an i a class of theme toggle lbel because we are going to just manipulate these designs okay so that's it so right now what you would see is if I just show you here you can see I'm getting this and empty label also I'll also have an empty label okay that's it this is an empty label right we're going to use this later on so this is it we have the switch also now what else you need is you need buttons okay so you would be needing buttons so here I'm just going to say we need buttons okay so buttons so uh for the buttons what guys I'm I can do is I would just say we have a division okay and let me just name it as class as Keys okay so I would have all of my keys here right so first of all I would have a backspace button okay so I would just say we have a button inside this I would just show my backspace okay so let me me just uh tell you what kind of design I want I want a backspace then all clear then percentage sign then division then similarly like this okay so I want all these s so for those for those I would be creating buttons okay so let's do this right so for that guys what you need to do is again you'll come here and here I would just say first of all my first button would be backspace so for that we need an icon like this so how can we bring the icons so right now it's empty our project is like this and you can see that the button doesn't have anything but what I want is I need an icon here okay I need an icon here so for that I can simply search for hero icons that's it hero icons so you can see this is hero icons and guys here I would just look for the back button okay so I just type back you can look for any other icon here I just type back so you can see we have a lot of options here what I can see is I would just pick this one so I have to copy SVG so copy SVG and then after after this you can just paste that SVG here that's it it's very easy to just add icons like this okay SVG icons now let's see how it looks so our page is this and you can see that this U like right now it's too tiny that's why it's not visible but yeah our button is there our button is there that's it so for the first button is here that is the backspace button then guys we're going to have the all clear button so I would just say that we have a AC button that is all clear right similarly I'm going to say we have a percentage button so uh let's write button and then we have a percentage button okay percentage button that is for taking out the percentage right then uh we have the division button so we have a button and it's for division so division sign that is Slash and then we have numbers so I would just say that is we have number 7 8 9 and then plus sign actually star sign then we have four five 6 and then we have minus sign and 1 2 3 and we have plus sign then we have zero then we have equal we have a decimal sign and then we have equal to sign okay so these are all the signs which we have and these are all the buttons which we are going to have okay so you can see we all have all of these buttons so you can see right now nothing is working here because we have to make them work okay so first of all what I'm going to do is I'm simply going to add some style to this so uh guys what I want is this equal to button would be having some different style okay so you can see this equal to button has some different style so I'll just say that this has a unique style so I'll just say class and equal BTN that's it equal B that's it so we have the buttons also and later on we're going to add JavaScript to this but first of all let's complete the CSS part okay so the first thing was the audio now let's complete this audio part also so audio is very simple I'm just going to use audio tags so that we are allowed to play audio so audio tag let me just give it an ID of button sound so b u t t n s o u n d button sound right and then inside this guys what I can do is I would just say we have a source and Source would be having the audio which I want to play so I want to play this audio right so I would just add the source inside this okay so here guys inside the SRC I'm just going to say button click. MP3 okay I would just add the audio file which we have inside this project that's it and then after this guys I would just say the type of this is uh audio MPG that's it that's it okay so you can see that our audio is here right now our audio won't play because we haven't provided the functionality on what purpose you want to play the audio we can actually do that via using JavaScript so we'll do that via JavaScript okay now our HTML part is almost done so now we are going to focus on the CSS part okay shik nice approach hi sir please make next year's Project Playlist uh definitely uh we will be making next year's projects actually these are some last of the HTML CSS JavaScript videos which I'm making after that I'm going to focus on react CHS and next CHS which are the newer front end uh UI designs which we make on xjs or react so in that we are going to make better UI and definitely more customization more features so yeah U I'll be making projects definitely on next year because it's currently on Trend okay so thanks for the suggestion now we have this front end done HTML part done right we have the HTML part done now we're going to say that we are going to just add some CSS to this but first of all let's have a look so our main goal is to actually achieve this so you can see that our final goal is like this so you can see that if I refresh it's dark okay it's dark if I if I just show you like this you can see it became light okay now if I refresh so it would stay light that means it's remembering your theme now suppose this is the final project by the way and currently we are working on this okay so this is the final thing which you would get so suppose for the final thing right now it's light okay so if I paste it somewhere else so it would stay light okay it would stay light okay but suppose here if I suppose change the theme okay now if I just copy this and I reopen this someday later or sometimes later so you can see now it's dark by default so your theme is also remembered here so we're going to apply that logic also and then we are going to design these buttons and then according to the theme the button would look like that okay so let's do this now so guys for that it's very simple like you are going to toggle your light theme and dark theme using JavaScript but you have to just uh first of all make a simple theme so I would be starting with light theme and using JavaScript I would start the Dark theme okay I would make the theme as dark let's do this so for this we have to Simply say that we have the style. CSS file I would come here and I would just say style and I would just say uh I'm sorry it's for the link tag so linkel and here we are going to say that we have the CSS file so in the same directory uh we have to look for what we have to okay it's actually style sheet St y l e sheet okay and here we have to give the href equals and inside this we'll get the suggestion okay yeah that's it so I'm just saying that our CSS would be here so we have just connected our CSS that means you would be writing the CSS here and it would be used in this HTML page okay so let's come here and here I'm going to say that we have the body right so we we have the body tag outside so I'm going to say that we have the body okay we have the body tag and here I can say that my display is flex display is flex so uh let me just show you this page and what I'm going to do is I'm going to split this apart okay so yeah that's how it would look so you can see that we have display flex and right now you can see if I refresh if I refresh you can see nothing happens but let's let's start so I'm going to say that Flex direction would be column that means I'm saying everything inside this page would be in column obviously we only have one division tag that means we only have one division tag so obviously it would be just single tag so Flex Direction actually it's not required here so I just want to say that I want all of that that means this calculator this division in the center of my page how can I bring that so we can actually use flexbox that what that's what we are using so I would just say that display flex and then I would just say that align item Center okay so if I make align item Center so you would see that uh align item Center and justify content Center so you would see that things would be now in Center okay so if I just save this you can see things are are now in center but the problem here is it's not in Center uh height wise so what we can say is we have to give it full height because right now it's having the minimum height okay so if I give it full height that means body has full height then it would be coming in Center that means everything inside the body would be in Center so I would just say that the height of the body would be 100 VH that means take the page size complete page size so you can see that's how it actually looks okay and guys one more thing I'm going to say that we don't need any margin for this so just remove the margin and what else can you remove is you can also remove the padding and different things which we have by default okay that's it so that's it now we going to say that we need some background colors also right we need some background colors so for that guys I'm simply going to say we are going to declare variabl so that we can write the color again and again by the variable names so it's easy to change the colors okay and it would really help in JavaScript to just manipulate the colors so here I'm just going to say we are going to Define some colors okay we are going to Define some colors how we can say that so right now I'm just going to do this for light theme okay I'm just going to do this for light theme but later on we going to toggle the Dark theme also so initially the app would be in light theme so I'm just going to declare colors for Right light theme here okay so uh for that what you can do is I would just say first of all we have a variable named as BG color okay we have a variable named as B BG color so here I'm just saying that we have a variable named as BG color and uh its color would be something like this so how do I pick the colors okay how do I pick the theme colors I'll just show you how how you can pick the theme colors but let me just paste some colors here okay so we have a text color also okay so I'll paste the text color and uh similarly we have the keypad BG color okay this is also a variable and then we have key keypad BG color 2 okay that's it so we have these colors and I'm just going to give them some values so this text color would be having this value okay similarly this keyboard keypad BG color would be having this value okay so all of the code would be provided so you can just choose my theme directly or I would just show you how I picked a theme color Okay matching theme color so right now you can see these are some color combination how did I decide the color combination so it's very easy I just went to color themes okay just type this color themes and here you would get a lot of websites you can go to any of these websites uh color Hunt is a good website or colors is a good website so you can just visit here and you can search for different colors you can see that a combination of colors are here so if you have if you need some colors like combination of four five colors looking perfect together so you can look here and you would get different combinations right you can also search light here so you would just get light colors here right light okay so you can see you would get light colors here similarly if you want dark colors so you can just search for dark okay so it's very helpful for beginners who don't know the color code and who feel that uh their UI doesn't look good because of their imagination so you can always pick the color codes that actually makes more uh sense and uh it's always better like you don't need to decide the color codes you can just pick color codes from here and your theme is already matching with everything okay so it's very beneficial you can use these color codes very beneficial okay you can just directly copy from this so you can copy from this and you can paste that from anywhere okay now let's come back and uh what I want is right now our app looks like this and you can see it looks like this okay so what you want is first of all in the body in the body I'm going to give some background color okay I'm going to give some background color so here it I'll just say that background color and let's say we have uh we have which variable for background color so for that first of all you need to Define you have to write where inside this you have to you have to write whatever variable you have defined here okay so I'm I'm going to say that my BG color would be the variable so it's very easy to write here okay so now I'm just saying my BG color would be actually this color okay so I'm going to use this name everywhere so later on if I change this color the name doesn't changes and it's easy to change the color anywhere that's why I'm using variables here okay so it's a very good approach and you must always follow this approach right then we have what we have the calculator class okay so here you can see inside the body inside the body we actually have the calculator class okay don't worry about this audio this is you can consider just something which must be there to play audio okay it's it has no significance here you won't be showing this in this page okay you would be hearing the audio you wouldn't be showing the audio right so that's it so here we have to come and we are talking about this calculator okay so I'll just copy this class and we are going to design this okay so I'll just say my calculator would be of some mobile size okay that means 16 is to9 okay so I can just say that first of all the width is 100% okay width would be 100% and uh I would just say as ratio would be let's say 9 by 16 okay so you have to write 9 by 16 so that you get a mobile design okay and uh if I just refresh okay what I have to do is uh I also have to say that maximum width of this can be what uh maximum width of this can be suppose 350 pixel okay so if it's 350 pixel so you can see it looks like this okay what else you can say is uh I want to give some background color to this okay so I would just say background color and I want keypad color okay so keypad BG color I want want this as a background color okay so now if I refresh okay it's actually same almost same that's why it's not looking not that much different so what we have to do is we have to give some lift okay we have to give some lift for that what you can do is either you can change the color if you want you can change the colors also you can get better colors or darker colors whatever you want to actually highlight this or else what I can do is I can just show box Shadow okay so first of all I would just say that we have a box Shadow and box Shadow and I'm just going to say 0 0 10 okay 10 pixel and then we would say that we have white color okay so RGB and we have to pick the colors from here so I'll just first of all say that white colors okay uh okay just a second so white colors that's it and here what I'm going to do is I'm just going to just decrease the lightness okay so that it's a little bit more transparent and you can see that I get some box Shadow okay it's little bit lifted and I got some box shadow okay that's it now what we're going to say is we need some border radius also okay uh let me just make it a little bit more darker so that everyone can see this later on I'll I'll remove this okay so right now you can see it looks like this and what what I want is I want some border radius okay I want some border radius so here I would just type 20 pixel or 10 pixel whatever you want and yeah you can see it's like this some border radius then I would say we need some padding so we need some padding I would just say 20 pixel would be fine for this so 20 pixel so you can see we have some padding also okay and you can see that the size is almost similar to the mobile device so it looks cool right now we can say that we need one more thing that is display Flex whatever items are inside this I want display flex and you can see by default Flex Direction became row what I want is I want to make it Flex direction as column okay so you can see Flex detction is now common column okay now I'll say that there must be some Gap in between each item so what I'm items I'm talking about is you can see calculate actually has three divisions so I'm talking about these three division first row second row third row okay that's how it actually looks so we going to say we are going to have some Gap in between them okay in these three so I'm just going to say that here Gap is what around 10 pixel that would be fine so you can see 10 pixel okay that's it now we have designed this and what else do we want is we can actually bring things in Center also or else you you can do as per your wish uh like I think this is fine we are going to design these elements individually okay now we're going to design these elements individually first of all we have the display inside okay could you please start sessions on laravel 10 okay I'm not that great in laravel but I would look if someone in geks for geeks is proficient in Lille uh but definitely I'm a monack developer so I'll try to bring sessions on monack mostly but um let's see if in future if I am I became good at Lara will then I would be bring sessions also okay rock shorts okay thanks so now let's continue okay so till now we have just made a very basic template now we want to say that this is the display right what actually is it you can see that this is the display this is the division inside this division we have the input so we have to now Design This we have to design this so here we'll come back inside the calculator do calculator we have our display division okay it's a division so display and this is actually a division region so just say we have a background color and let's say it's it's having a variable background color let's say again BG color okay so BG color and now what else I'm going to say that border radius would be around 5 pixel and right now it's not that much visible because obviously the same colors are here and that's what I wanted now what I what I would say is I would also say that we have some uh box Shadow similar to the above so I'll just give some box Shadow and let me just make it white again okay that's it so you can see that yeah you would get a box Shadow like this you can see that the box is here that means display division is here you can see complete withd is taken by display Division and this is a small input tag you can see this this is the small input tag and over this we have this division okay what I would say is this input tag would be taking whole Space okay that's what I'm going to say okay so first of all uh one more thing is I would just say that we have given padding also so we have to give padding also okay padding would be given and and and and what else I want text align to be in right that means whatever you write in the calculator starts from the right side that's why I would just say text align would be right so you can see automatically every content would be starting from the right also okay that's it and now what else I want the color also so I would just say that color would be text color okay so that means whatever you're going to write inside this would be according to the text color okay so right now the buttons are not functional but if it works they would be according to the text color right uh actually this is not for the text color okay we are going to do that in the input part I'm sorry this is not for the division for the division this is fine now I think this is it we can give some font size also okay some font size also that means whatever you're going to write would have some default font size and you can also say that it has some height of 20% okay so that's what I've given so you can see that this looks a little bit bigger and now according to this we are going to design our input okay so again I'm going to say that inside the display we have the input right inside the display we have the input tag so I would just say again the display input tag would be having 100% width okay 100% width so you can see it looks like this and uh you can also say height is also 100% if you want so you can see full height is taken actually and then I would just say background color is actually transparent so there's no background color for this input so it takes the background color of the display division right so after this we don't want any border we also don't want any outline okay so I just say outline would also be then that's it so you can see now we have a pure input tag okay and one more thing you can see it's starting from left side so I want it to start from right side okay so for that what I can do is I would just say text align as right text align as right and what else is uh actually we don't really need text align here so I'll just remove it from here and what else can I remove is I want font size here okay I want font size here we don't need font size there okay that's it and I think we have designed this input tag right now what I have done is I simply said it as read only that means you can't type anything here directly but now let's try to type here so you can see it's like this okay it's like this uh what else can I do is I want the color Okay I want the color so here itself I would just write color color and it would be again a variable text color okay so now let's try to write something so you can see it looks like this okay so we have the color also right we have the color now we want to to say that our buttons that is the keys would be style okay so we would just say what keys we are talking about can see we have a whole division which contains all of our buttons okay which contains all of our buttons so we have to actually style this okay so here itself I'm going to say that suppose if I if I say that we have the keys division right so we have the keys Division and I want to show them as a grid of three four buttons in each row right that's how actually looks so you can see that we have four buttons in each row so we will be creating a div uh creating a grid okay display grid of four items in each row let's do this okay so we are going to use display grid in this case Okay in this case for the geese so for the case I would just say first of all display is GD so display is GD right display is GD so you can see that it's now taking the full space uh but instead of this I want three in uh four in a row okay four in a row so I would just say grid template rows grid template rows inside this I would just say repeat and uh I would just say four items taking equal space in a row okay that's it so you can see that's how it actually works now you can see that equal to button is actually different because we are going to give a little bit bigger size to the equal to buttons that's why I have left some EMP empty space so we'll fix that later on but right now you can see that that's how it actually works okay so now we have given some space also and we want some gap between them so 20 pixel is the gap so you can see we would have some Gap in between right and I want this whole keys to take 80% of the height okay that means the display is taking 20% so I want the keys to take 80% okay so you can see now according to that you can see we have the elements right and also one more thing I would make my cursor as pointer as soon as I bring my mouse over these okay I think okay I have to do this for buttons I guess that's why it's not working anyways so now we're going to say that we have buttons also so we are going to design our buttons that is inside the keys we have all of our buttons right so we're going to say we have the buttons so first of all the background color would be BG color BG color okay so you can see buttons also has this background color and then I don't want any border for these buttons I want the Border radius to be 5 pixel which is right now not visible because the background is same so we'll give some highlight also and for that first of all I just say that we have the padding 10 pixel and I think font size would be 20 two two REM okay sorry font size would be 2 remm okay around two RM so little bit bigger font size and what else we need some text color also so color would be where text color that's it so text color and also if I over on these buttons the cursor would become pointer so you can see your pointer is here and after this I would say that outline on each button would be gone suppose if you press this there is some outline so on each button the outline would be gone that means there would be no line if you click on the button okay now we need the Box shadow okay so we would just say we have a box Shadow and let's say 1 pixel 1 pixel and 5 pixel spread okay and we are going to say that we have variable where color it would be color two okay it would be color two so you can see some highlight is here right some highlight is here uh what else can you do is you can see that some more towards other side so you can see yeah now it's equivalent now it's equ valent okay so you can see that's how my buttons are looking and I can actually just shift this more that's it so you can see that's how my buttons look okay that's how my buttons look now if I want to say that if I have a equal to button so you can see equal to button is taking only this space so I I want it to take space of two items space of two items that means this is a grid each item is taking one one amount of space suppose I wanted to take space of two items so just say that we have the equal button class right so we have the equal button class so just say we have do e q l BTN okay equal button right inside this guys I would just say grid grid column and I would just say it would be starting from three and ending before five okay so you can see that's how it takes okay that's how it takes okay so it would take this much amount of space now just say background color would be where color two okay that's it okay so you can see I have given some separate great color and the text color would be text color would be white okay text color would be white so you can see that's how it actually looks okay now after this at the end we have the theme switch so you can see we have the theme switch and we have to make it like a theme switch that means like this so you can see we have the switch so we have to fix this okay according to this we have to create it okay so we'll come back here and we have to create the switch for this guys uh I would just say we have the dot theme switch division right we have the dot theme switch division outcome come here I'm actually talking about this I'm talking about this theme switch division theme switch division okay so we have targeted this right so now inside this guys what I can say is display is flex first of all and I want this theme switch button to look to be in right side to be in right side that means Flex end okay so I just say that align item first of all in Center that means it would be in Center okay what else can you do is you would just say justify content Flex end that means it would be in last okay it would be in last so you can see now the elements are in last okay that means the checkbox is now in last right now after this I would say that I also want some margin from bottom so I can actually give some margin from bottom if I want so you can see that's how it actually looks right done now after this we are talking about the label class inside so you can see that we have this we are talking about label class okay it's actually theme toggle label theme toggle label so I'll just copy this hi satk uh guys if you have any doubts you can ask me in the live chat uh I'll be looking in the live chat in a while okay in some minutes again and again so if you feel that I'm ignoring you I'm not ignoring you you can actually uh mention your doubts in the live chat and uh in every few minutes I'll be looking in your doubt looking for your doubts okay now let's continue we have done this part we are going to Target this theme toggle label okay that means we are going to Target this label now you'll see how we'll create this toggle button okay very very interesting so we have to first of all say that Target this and then I would just say display is inline blocks so first of all we have to make it as inline block okay then I would say it has some width of 40 pixel and it's like this width of 40 pixel and then height of 20 pixel so I want some cylindrical you can whatever call whatever shape okay so I want somewhat that that kind of shape okay circular and oval shape okay oval shape actually okay now I would just say that background color of this would be keypad color to some different color okay so you can see yeah we have this now we want to give it some border radius so border radius is 20 pixel so you can see that that's how it actually looks okay now you might have guessed that we would actually hide this okay right so let's come back here and uh first of all I'll say that from Top actually uh let's first of all make the position as relative okay later on we'll insert a small circle in that toggle Okay small circle so for that we need some position relative at the top and inside this for the circle we would make position absolute right now position is relative and one more thing if I take my cursor over this it would become pointer okay now inside the label we are going to create a circle so that's what I'm going to say that inside the label inside the label we would just use after so that we don't need an extra tag after I would just say that there is no content okay just empty I would just create a circle okay so first of all I'll just make position as absolute position as absolute and then width as 18 pixel and height as 18 pixel then I want border radius as uh border border radius as 50% % water radius as 50% and background color as white no not white actually text color Okay background color as text color so whatever is my text color I would just pass it here so you can see that my button actually looks like this okay you can see we have a circle and then we have the label okay it looks like this okay so that means our toggle actually is done and one more thing which I can do is I would just shift it a little bit to the top so top one pixel that means it would shift according to this liel okay that means it was too actually too low that's why I'm shifting this and it would shift towards the left like this one pixel that's it little bit shift okay it's not noticeable but still there is some shift okay that's it and now I would just say that the input inside this inside this theme switch would be having display as none okay so just say that the input inside this won't be having any display okay so display as none that's it okay so you can see if I click on this automatically the checkbox would be targeted we don't need to do anything right that's it okay now what I have to do is uh if I if I just uh okay one more thing if I just un if I comment this okay if I comment this suppose if I command this control and slash so you can see if I click on this you can see it gets checked and unchecked that means even if I hide this it would get checked and unchecked okay now our only main task is to move this to actually move this circle towards left or right left or right that's what I want okay so what I'll say is if the checkbox is checked okay that means if the input if the theme switch input okay is actually checked okay it's actually checked then I would move the circle towards right side okay so uh I would just say that if it's checked though so I would just say in the theme label class okay in the theme label class so you can see in the theme toggle label class just copy this okay in the theme toggle label class after of that that means the circle okay that means the circle I want to just translate okay I would just translate okay so t r a n s uh okay we have to transform I'm sorry transform and then translate X and then I'll would just make it 20 pixel okay so now let's try this so if I click on this so you can see yeah now it's moving you can see now it's moving okay so I hope you understood how it actually works if it's checked so it would move towards the right side translate like that else it would become normal okay that's what I've said Here and Now if if you want to have add some transition also on move so you can actually do that by simply saying in the after part in the after part if you click this if you make some changes after that so you would actually do things there okay so uh what I'm saying in the on transform I would just make some transition so a little bit of smoother transition you can see a little bit of smoother transition okay that's it now at the end I would just hide this so we don't really need this input I would just hide this automatically check and uncheck would be done you can see it's very easy right it's very easy and uh what else can I do is uh pointer events as none let's check so okay anyways I'm getting this anyways anyways okay it's because of my browser anyway so you can see that it's done okay now suppose if I want to apply Dark theme okay suppose I want to apply a dark theme so what I do is I'll simply change the colors okay so I'll just copy this colors for now I'll just comment this part and let's change the colors now okay for the Dark theme so what colors have I picked are simple colors again from the colors website from this color website I simply picked some theme colors and again I would just paste those colors okay so the colors are actually very simple uh we are actually working on this yes we need to dark we need Dark theme suppose now we are talking about the Dark theme so how it would look so first of all for the Dark theme I want the B color as this one so you can see that it looks like this now I want the text color like this okay I want the keypad color like this and I want the keypad BG color to like this okay so you can see that's the Dark theme that's exactly the Dark theme that means using JavaScript I'm going to just convert these to this that's it that's what actually dark tee and light theme would do okay so now let's go back to light theme because by default I want light theme okay later on we'll use JavaScript for Dark theme right so now we would use JavaScript to actually Target this but first of all let me just uh do one more thing that is uh let's see okay this is it fine fine so we want to say that whenever I click on this button that means Whenever there is a click on this then only change the theme then only change the theme so we want say first of all import the JavaScript here I would just say import the JavaScript that script.js file right now it's empty we are going to write code inside this okay so we'll say first of all that uh we have to change the theme right that means whenever I click on theme toggle what is theme toggle we are simply talking about this input we are simply talking about this input you can see we have this IDs theme to so I just copied this and let's say const theme toggle equals and I would just say document. get element by ID ID get element by ID inside this just provide theme toggle okay just provide the theme toggle ID this is the ID right so now I have targeted this input element that means on check and uncheck we can actually do manipulations how we can do this first of all uh we would say that if I check and uncheck so we would just say theme toggle. add event listener that means whenever I make any change that means Whenever there is a change okay whenever I check or uncheck when ever there is a change just call this function just call this function so I'm just going to call this function that's it I would just say that if it is checked if I am checking it that means what I want I want to convert it into dark mode okay that means I want it to be light to dark light to dark that's what I want if I'm checking it that means I'm performing this that means I want it to be from light to dark if I again click this I want it to be light from dark to light okay that's how I actually want things so here I would simply say I want to uh just say that document that means I'll Target the whole document document do document element do set attribute and guys inside this you just need to provide BG color what background color I want for the dark background I want the BG color as this one so you can see we have BG color as this one for dark one I have this BG color right that's what I've said so I'm just saying if theme changes that means I check this that means I want the color to change I want the color to change okay so now let's refresh first of all so if I check this okay right now it's not working why it's not working because uh we haven't targeted it okay we haven't targeted let me just check if it's uh able to go here okay so here in the right click part we would simply go to the console that means inspection menu we would go to the console and you can see that unknown property okay document okay we we did one mistake it's actually do style okay so dot style dot set attribute okay so now if I click on this uh set property okay set property okay now it would work so I'm just saying that background color would be having this okay so I'm just setting property if I click on this you can see that background color changes and in the opposite case in the opposite case that means uncheck that means else case what I want is I want the background color to be this one that means I'm talking about this color Okay I want the background color to be this if I'm talking about light theme so now let's see so if I click on this if I click on this click click so you can see light and dark actually work like this right so similarly I'm going to paste all the colors which I want to change so I'm going to paste all the colors which I want to change that's it so you can see that if I click on this all the colors would change okay these are the same colors which I mentioned here this is for the dark this is for the light okay so for the light case we are coming here so we would just say for the light case for the light case that means from dark to light I want this okay so if I click on this it would become dark it would become light that's how things actually work between light and dark okay so I hope you understood this part now what else do we want is suppose I am in dark mode but if I refresh so you can see again came back to light mode that's what is very annoying and in a lot of websites you can see if you are in dark mode you would stay in dark mode how that actually happens it actually happens because of local storage okay so we are just going to create a temporary variable in our local storage in our browser which would actually store some values either the theme is dark or light so I just say on store theme equals local storage dot get item and theme so I would just create a variable named as theme okay either it would be dark it would be light so I would just say that if I am seeing that from light it became dark that means I'm just going to set my theme variables value so local storage local storage and I would just say theme variables value would be dark and if I'm going from dark to light that means this case I would just say theme variable would be having theme as light that's it so you can see right now set the variable values but how am I getting colors accordingly so as soon as my page loads as soon as my page loads that means this this refresh I want to look that what was my last Sav variable value so you can see in this case what would be the value of theme it the value of theme would be dark if I suppose change it now the value of theme would be light so we have to look whenever we refresh the page suppose I left it on dark whenever we refresh the page we have to look for the value of this toggle theme according to this we would show things okay so I would just copy this part just copy this part and I would just come here and I would just paste it okay and in this time I would just say if theme toggle equals equals uh suppose if it's dark okay if it's dark then I would set these colors yes I would set these colors that's it okay and you actually don't need them now so you can remove this okay you are just showing data on reload and this is for the button click okay so now suppose if I make it dark and if I refresh so you can actually see that it's not really working here okay so the problem here is we are not able to set it okay let me just refresh okay maybe now it would work so if I now refresh so you can it's not setting the theme okay why it's not setting the theme because uh okay okay okay it's actually stored theme okay one mistake which I did here is stored theme okay I'm sorry uh we are talking about stored theme okay so stored theme equals dark if stored theme is dark then only set these colors that means if last theme was dark if last theme last variable value was dark and you close the website and you open the website again so it must remain dark that's what I've have said that means it would look for the last value if it was dark in the last value that means in local storage it it was saved as dark so I would show this colors yes I would show these colors okay so suppose right now what I want is you can see that one problem one more problem is here actually can see that the Toggler is not moving Toggler is not not moving why it's not moving because uncheck and not check is not performed here you can see that by default the checkbox is unchecked so what I want is in the case of dark if suppose I left it on dark and I restarted the website I want it to be checked that means it's already dark so I want it to be checked so I would just say theme toggle do checked equals to that's it okay so suppose now if I uncheck and if I reload the website it would stay unchecked if I just reload if I if I just check now and if I reload so you can see it would stay checked okay that's how it actually works so dark theme and light theme I hope the concept is clear to you now we are going to complete this project one last how did you equal okay equal to button is just because of grid okay just because of G let me just show you uh what I did was for all the buttons first of all for all the buttons what have I done is you can see this is for the all the buttons you can see keys I would say that in each row in each row I would show four items equally space in each row out show four items equally spaced so you can see four items four item four item four item the problem is we didn't had equal that means uh we we we had equal to here if I just remove the style of equal to so you can see we have 4 8 12 16 and this is what uh 19 okay 19 right 19 so we have 19 buttons we if we had 20 buttons so it would perfectly fit here we had 19 buttons so what I want is I wanted to expand that means I want this equal to to take the size of two two columns okay two columns okay two columns so you can actually see that's what I have done here so I've said that equal button my equal button would be taking size of two columns that that's it that's how grid actually works right so I've simply said just skip the first skip the second start from third and end before five okay end before five okay end before five that's what I mean okay that means take the space for third and fourth column that's what I have said okay I hope now you understood this so this is for the equal button logic now let's come here in the script JS now one more important thing which is pending here is what is what so remember now we are creating a calculator so we have have to click buttons we have to click on buttons and according to that we have to show data right so for that I'm going to create some functions and I'm going to call that functions into our HTML page so uh I'll just okay now from here now from here I would say that first of all let result okay so let result where is my result shown my result shown is actually shown in my result is actually shown inside my input okay inside my input you can see inside my input my result must be shown so you can see the idea of that is result so what I have said is just Target this first of all I've targeted that now it would create some buttons so function and first function would be append uh to result so whatever number you pass here whatever value whatever number or sign you pass here I would just show it to my input okay I would just show it to my input so I would just say that result whatever value is already there in my input get the value and add the new value suppose two was already written and after that you have written three that means you are trying to write 23 so first you will write two so suppose two was already there and then you would add the new value to this append the new value to that okay so equals plus equals value that means I'm saying previously if it was two now I'm appending the new value appending the new value that means 2 and three 23 suppose after this I just wrote the plus sign so 2 3 and plus that's how it actually works right so we have to Now call this function okay similarly we are going to have one more function we are going to have one more function that is play button sound which would always play when we are trying to press a button okay that means we are going to play a sound so I'll just create a function here play button sound just close this and here I'm just going to first of all leave it empty we are going to write that later on so play button sound would be called whenever I press a button okay whenever I do a pression okay similarly we're going to have a backspace button which would just clear out the last thing that means if you have just written one number so it would remove that number all the previous data would be here okay so back space so I'm just going to say suppose we have a function named as backspace okay back space okay just open this and inside this I'm just going to say that if result dot value whatever it is I'm just going going to remove the last thing for example if 23 is written if I press the back button three would be removed that means two would still be there that's what I want that means I'm going to slice the value by one okay so I just say I would just remove the last value okay so value okay value dot slice that means old value would be sliced okay slice inside this I would just pass 0 comma minus one that's it so I'm just saying that whenever I press on this back button this one that means I want to just remove the last digit last digit or last uh icon number whatever you want okay that means what I've said is whatever is in whatever thing is inside my string suppose my string is like 2 3 + 1 0 3 4 equals suppose this is my string suppose if I press the back button okay actually not this one okay if I press the back button that means I want to remove four if I press the back button I want to remove three like that okay so that's how the back button would work I'm not clearing all things I would just remove the last digit that's what I want and one more thing is I would play the button sound because I'm pressing this I'm pressing this okay I'm pressing this button back button right similarly we're going to have the clear result okay clear result would be very easy I'm just saying just remove everything that means just make the value as blank just make the value as blank that's what I have said here right and at the end we would have the calculate function so we have the calculate function so function calculate and here I'm just going to say whatever is inside my input that is inside my result I just want to calculate that supposed 2 + 3 is inside my result I just want to calculate that so for that we actually have eal function built in in JavaScript okay we have an inbuilt e function so I would just say try first of all try and I would just say catch we are using try catch so that if there is an error our website won't crash I would just get the error and everything would be working fine still okay so catch error E stands for error and here I would just say that whatever is the error if Suppose there is the there is an any error so I would just say in my input I would just show a text like error okay I would just show a error text okay like this okay like this so if there is an error suppose you are making some bad calculations so you just get this message return here return here that's what I've said right now in the try part I would just say that if suppose the result is empty that means you can see right now it's empty we haven't written anything here right we haven't written anything here if I haven't written anything and if I press equal to that means I'm calling the calculate function so what must be shown so zero can be shown okay so that's what I'm saying that if the value was empty if the value here was empty then I would just show zero or you can leave it empty you can just leave it empty whatever you want okay that's totally up to you I'll just save it as zero okay but if there was some value that means about 2 + 3 was there so I would just Ral okay I would just eal okay so I would just say that the new value of this input would be the total of old values so eal and inside this result do value so so this would be what this would be string of data that means 2 + 3 string I'm just evaluating it this is a function which is inbuilt in JavaScript that means 2+ 3 would be calculator and then I would just show the result if the 2+ 3 is invalid suppose 2+ 3 is invalid then I would get the error suppose if I just say 2 + 3 into that means after into I haven't return any digit so this is an invalid operation right so I would just show this I would just show the error directly okay that's how it actually works now at the end what I want is I want one more thing that is to play the sound okay to the play the sound so for that I want to Target the audio tag so I want to Target the audio tag this is my audio tag and this is the ID for that audio tag okay so I'm just going to say const button sound and I'm just targeting this audio tag that's it and then I would just say uh I would I would just say that if I suppose pressed on this button if I just pressed on this button that means audio would start playing but immediately I pressed I pressed on this button so I don't want the old audio to play I just want it to start from scratch so I would just say start from scratch so button sound dot current time that means if I pressed on four five buttons at the same time so audio would be played five times that's what I mean okay so current time equals z and then I would just play the audio that's it okay so that's it and one more thing is I just need to call this on calculate okay so I would just call it here so that it's called whenever I press the calculate button okay that's it so now we are going to just assign these functions to our buttons okay to our buttons so the number one task which we needed to do is first of all we have the backspace okay so first of all we have the backspace so we are just saying that if I press on this back that means we are going to call the backspace function that's what I've said okay that means you would just clear out one by one one by one clear out things one by one okay then after that we are saying that if AC is pressed that means we are going to call clear result we are going to call clear result that means which one so you can see I'm calling uh it's actually clear result okay so clear c l e a r r e s u l t that means if I press on AC I'm calling this that means I'm just just clearing all the values that means on input uh on input bar nothing would be shown okay and just audio would be blessed okay that's it so now come back here this is for the clear result now we have to show the Valu so for that what I'm going to do is I'm just simply going to say that uh upend to result function would be called and the value would be sent that's what I'm seeing okay that's what I'm seeing so upend to result would be called and the value would be sent okay so now let's try this so if I press seven 7 8 9 like this okay so you can see I'm pressing the buttons and according to this I'm getting digits okay I'm getting digits right and if I press back so you can you can see back is also working now if I press AC you can see AC is also working okay and same for the light theme everything is working everything is sa right now after this at the end one more thing is here we have to just calculate the result okay so for the equal button we have to pass the calculate function okay so I would just say that it would have the calculate function okay that means if I type 7 - 9 so if I press equal to so you can see I'm getting the result this is because if I press this calculate function is called calculate function is called right and in this I'm just calculating the result that's it okay but suppose if I say uh if if I just press all clear suppose if I try to calculate data like this okay so if I press equal so you can see I'm getting error that means it's perfect I'm getting error I'm getting error that means it's perfect but here if I press back you can see it's it's pressing one by one so in the backspace part I have to add one more condition that means that if result. value equals error so just if if someone try tries to press back on that just make everything empty that means if Suppose there is an error okay Suppose there is an error if I press back so I remove everything okay so now you can see that this project is actually completed and I hope you understood this video you can see that if I see on empty you can see right empty if I press equal to you can see I'm getting zero okay so this is actually because of the logic which we have created here right so now the project is actually completed but what the calculator should work for Dark theme like what if we want to make it disabled at dark theme uh I'm really not able to understand what we are trying to say but let me just show you what we did right now so you can see when you start the project it would open something like this okay or it would open something like this let me just close everything okay so when you start the project it would open something like this okay fresh project now what I've said is if I make the theme as dark dark theme would work but I also saved it as in local storage why we have saved into local storage because once you close this once you close this and you reopen the website after 5 days or 10 days you still want the Dark theme right you don't want the White theme and you would again switch to dark theme so we have simply used local storage and whenever we load the application we load the website first of all the stored theme variable would give me light or dark whatever is the value in this case the value was dark right value was dark that's why it was just showing me Dark theme by default okay suppose now if I leave it light and I close my website again okay I close my website again and I open it after 5 10 days so it would be in my browser's local storage and you can see my default theme is now light okay so this is for like uh better user experience that's why I have used local storage right so now guys I'll upload the source code into my GitHub profile so first of all let me just create a GitHub profile a GitHub repository here so I'll just say that it's neomorphic clock okay what if we want want the calculator to off mode yeah you can actually do that you can uh what what you can do is uh again this is also a very good uh suggestion what you can do is here we are storing theme Right theme is storing just a string dark or light similarly you can create a local variable which would be containing on or off string okay what you're going to say is similar to this toggle switch you are going to create one more toggle switch on that we can manipulate things okay we can manipulate things similar to this okay we can manipulate things we can change the the value of this variable on and off on and off and then I would say if the value of that variable is off so I can just make these disabled these functions disabled that means nothing would work Okay calculator is off okay like that so if you want to do that then you can just create one more variable and you can see that calculator is off so the value of that variable would be off if the value of that variable would be off that is a local storage if it's off then you can't perform these functions so you can actually add conditions to these functions okay like that so you can definitely do that also similar to the toggle switch which we did for light and dark theme similar to that you can do it for our functions also hi F from Vietnam oh that's great uh people are from Vietnam also right that's great okay thanks for watching uh okay finally I'll just upload the source code so neomorphic clock and it's in HTML CSS GS someone actually asked how much react is necessary to start next J uh actually uh it's not too different when you start react J when you complete react J after that you have to do next J that means uh if if I take you to the official website of next J actually react JS uh if I type react JS okay if I type react JS just notice one thing here you would just go to learn react and uh installation and uh you can see that uh next and you can see they are mentioning create next app this is for creating a next GS project that means react J official website is itself mentioning that please use nextjs that's a framework of react that means everything which you have learned in react GS would be still usable in nextjs nextjs just has some extra uh features okay just extra features which makes next J better okay so complete react J is required but definitely you would learn learn something in XJ which is extra in extra than react J okay so complete react J would be required to learn to actually know more about next GS because they are exactly same next GS is totally based on react JS so complete react JS is required then after that you would learn some extra features which are available in next year that's it that's all about next year okay right so the repo is created CSS okay CSS JS okay fine so I just create cre this and I'll share the link also all of the files are actually available here I'm pursuing MCA now I want to begin my journey as a front end developer I'm done with HTML CSS which topic of JS should I start with U complete JavaScript complete JavaScript there's no question you have to do the complete JavaScript part because after that you are mentioning that you are going to learn about monag right so monag is just mongodb Express react and nodejs all these use JavaScript okay so you need to to master JavaScript at least learn all of the concepts of JavaScript uh functions error handling and then basics of variables then oops Concepts uh objects like that so you need to know a complete knowledge of JavaScript okay I would say complete knowledge of JavaScript would be great because if you want to become monack developer you must be good in JavaScript first then you would jump to monack and monack is just like you need to learn mongodb Express react and not just so what you can do is suppose you learned about HTML CSS JavaScript so this was your front end then you need some back end language so you would be using node just Express for backend right so the first step was HTML CSS JavaScript second step is nodejs Express and mongodb for the back end part and database okay so second step is mongodb Express and noes these three things third step is you would be learning a front end framework that is uh framework or library that is reactj or nexj or angular okay but for M Stack you would be learning reactj or nexj okay so the these are the three steps and the fourth step is just combine this front end that is in reactj and nextjs reactj or nexj with not just Express mongod DB okay so HTML CSS JavaScript is just for the basics later on you'll be learning not just Express mongod DB and after that you'll be learning react J and nextjs and you would be using these four things that means reactj or nextjs along with mongod DB noes and express okay so that's a short overview but you can watch videos on that and I think I have created videos on that so you can watch video on that and that's a very separate topic uh so uh expected salary expected salary is just like uh I'm not really sure about the expected salary but it's really great it's really great uh what I would say is once you start learning Monch please try to do some freelance projects because they would really help you a lot and it would add up to your portfolio Okay so expected salary is different for different regions okay it's actually Project based or company based I can't really say this is the amount of salary which you always get okay and one more thing the trend is always changing right now mon stack is trending but after an year monack might not be trending okay or maybe trending more okay I don't know exactly okay but right now it's trending you must learn monack later on maybe goang is trending or rust is trending so you have to learn that also okay so uh if you are wondering right now now that if you just learn one stag then you would get a job yes you would get a job but there they would teach you something else also maybe goang maybe rust whatever requirements they need for their websites okay so that's totally dependent on the company also they would provide you salary according to their work not according to your skills okay H does gfg conduct any live sessions on mongodb currently uh on mongodb currently we don't conduct any live sessions but yeah you can check the geks for geks development Channel we had some playlist there you can check out that Channel's playlist there are some mongodb nodejs and express uh playlist which would help you a lot okay for the complete back end right so yeah let's finally upload this source code okay so what I would do is I would just push it to my giup profile yep so get add dot get commit M commit M final and get push okay so guys now I have uploaded the source code what you can do is to get the source code you just need to visit my GitHub profile or I would provide the link also github.com v i r AJ 014 this is my giup profile and here you can go to the repositories and in the the repository uh yeah you can follow me here also in my giup profile you have my social media handles also so in this you can see we have new moric clock HTML CSS GS if you don't find this you can just search the name here you would find this okay so just click on this and you would get all the files including the audio file also okay I couldn't share you the audio here like no voice of my audio which I am clicking on the button that means whenever I click on the button there is some audio which is playing but due to this live session I can't share that but anyways once you click on this you would get the audio also and then every data is here and whenever I click on the button in my website in my calculator that audio would play we have applied that logic okay so you can test that on your own the source code is totally available here okay I'll also share this in the live chat so you can get it from there and also in the uh description or in the comment we'll provide the link for this repository okay so it's totally free you can check out the source code right so guys I hope you understood this video video I'll see you in the next week that means next Monday with some other project it it's already scheduled so you can check other projects also which are already scheduled in this channel so I will see you in the next one and please do give me some suggestions on projects for HTML CSS JavaScript or if you want to learn more stag then please just comment com just give as much comments as you can okay so I will see you in the next one till then see have a good day bye-bye