3 Fixing Some Problems in Calculator Project

Javascript: Build a Calculator Using HTML, CSS and Javascript Build a Calculator using HTML, CSS and Javascript
16 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€47.98
List Price:  €67.18
You save:  €19.19
£39.89
List Price:  £55.86
You save:  £15.96
CA$69.90
List Price:  CA$97.87
You save:  CA$27.96
A$76.87
List Price:  A$107.62
You save:  A$30.75
S$67.31
List Price:  S$94.24
You save:  S$26.93
HK$389.14
List Price:  HK$544.83
You save:  HK$155.68
CHF 44.67
List Price:  CHF 62.54
You save:  CHF 17.87
NOK kr553.51
List Price:  NOK kr774.97
You save:  NOK kr221.45
DKK kr357.84
List Price:  DKK kr501
You save:  DKK kr143.16
NZ$85.68
List Price:  NZ$119.95
You save:  NZ$34.27
د.إ183.61
List Price:  د.إ257.07
You save:  د.إ73.46
৳5,972.22
List Price:  ৳8,361.58
You save:  ৳2,389.36
₹4,221.07
List Price:  ₹5,909.84
You save:  ₹1,688.76
RM223.35
List Price:  RM312.71
You save:  RM89.36
₦84,627.22
List Price:  ₦118,484.88
You save:  ₦33,857.66
₨13,887.22
List Price:  ₨19,443.22
You save:  ₨5,556
฿1,722.96
List Price:  ฿2,412.28
You save:  ฿689.32
₺1,727.27
List Price:  ₺2,418.32
You save:  ₺691.05
B$289.99
List Price:  B$406.01
You save:  B$116.02
R905.58
List Price:  R1,267.89
You save:  R362.30
Лв93.83
List Price:  Лв131.37
You save:  Лв37.54
₩70,211.45
List Price:  ₩98,301.65
You save:  ₩28,090.20
₪185.06
List Price:  ₪259.10
You save:  ₪74.04
₱2,946.36
List Price:  ₱4,125.14
You save:  ₱1,178.78
¥7,736.95
List Price:  ¥10,832.35
You save:  ¥3,095.40
MX$1,021.22
List Price:  MX$1,429.79
You save:  MX$408.57
QR182.26
List Price:  QR255.18
You save:  QR72.92
P683.46
List Price:  P956.90
You save:  P273.44
KSh6,472.14
List Price:  KSh9,061.51
You save:  KSh2,589.37
E£2,482.01
List Price:  E£3,475.01
You save:  E£993
ብር6,118.22
List Price:  ብር8,566
You save:  ብር2,447.77
Kz45,640.87
List Price:  Kz63,900.87
You save:  Kz18,260
CLP$49,324.13
List Price:  CLP$69,057.73
You save:  CLP$19,733.60
CN¥362.07
List Price:  CN¥506.93
You save:  CN¥144.86
RD$3,012.01
List Price:  RD$4,217.06
You save:  RD$1,205.04
DA6,712.40
List Price:  DA9,397.90
You save:  DA2,685.50
FJ$113.77
List Price:  FJ$159.29
You save:  FJ$45.51
Q385.78
List Price:  Q540.13
You save:  Q154.34
GY$10,455.70
List Price:  GY$14,638.82
You save:  GY$4,183.11
ISK kr6,982.60
List Price:  ISK kr9,776.20
You save:  ISK kr2,793.60
DH502.76
List Price:  DH703.91
You save:  DH201.14
L910.90
List Price:  L1,275.33
You save:  L364.43
ден2,951.80
List Price:  ден4,132.76
You save:  ден1,180.95
MOP$400.70
List Price:  MOP$561.01
You save:  MOP$160.31
N$906.31
List Price:  N$1,268.91
You save:  N$362.60
C$1,838.97
List Price:  C$2,574.70
You save:  C$735.73
रु6,749.45
List Price:  रु9,449.77
You save:  रु2,700.32
S/189.51
List Price:  S/265.32
You save:  S/75.81
K201.21
List Price:  K281.71
You save:  K80.50
SAR187.68
List Price:  SAR262.77
You save:  SAR75.08
ZK1,382
List Price:  ZK1,934.92
You save:  ZK552.91
L238.86
List Price:  L334.42
You save:  L95.56
Kč1,216.06
List Price:  Kč1,702.59
You save:  Kč486.52
Ft19,746.05
List Price:  Ft27,646.05
You save:  Ft7,900
SEK kr551.69
List Price:  SEK kr772.42
You save:  SEK kr220.72
ARS$50,182.44
List Price:  ARS$70,259.44
You save:  ARS$20,076.99
Bs345.34
List Price:  Bs483.50
You save:  Bs138.16
COP$219,443.60
List Price:  COP$307,238.59
You save:  COP$87,794.99
₡25,456.77
List Price:  ₡35,641.51
You save:  ₡10,184.74
L1,262.95
List Price:  L1,768.23
You save:  L505.28
₲390,155.46
List Price:  ₲546,248.87
You save:  ₲156,093.40
$U2,130.69
List Price:  $U2,983.14
You save:  $U852.45
zł208.13
List Price:  zł291.40
You save:  zł83.27
Already have an account? Log In

Transcript

Hey, welcome back. So as we discussed in the previous video, we will be fixing some problems in this part. So what was the problem I have shown you already, so I'll just show you once again, if I hit some number, and if I go on hitting the Plus, it keeps on coming. And when I hit three here and hit equal to so you would see answer wouldn't appear, right? And another case was if I hit something and if I just hit plus or minus or whatever I like, and instead, I want to change my mind and put a minus here instead of plus, but when I hit minus the plus doesn't disappear and minus appears again. So if I go on clicking like this, so we need to fix this problem and what is the fix for this problem?

Let's discuss. So what I need to do is whenever I hit another thing whenever I hit minus punishments already pluses there, so I wanted to just detect the what is the last thing in this text box that is plus or minus or division or into so if it is already placed I would just need to remove that plus and add minus instead. So here I need to do two things. First, I need to detect the last thing in this textbox. And next, what I need to do is I want to just remove this one, and copy only the starting text and apply whatever I want to, for example, instead of plus i one minus, I would add minus to it. So let's see this in action.

So what I need to do is after the div tag here, before the body ends, I would just open a script tag here. And once I open the script tag, I would just go to the plus symbol here, so on click plus, so I have problems with the plus minus into and division, right, so I will change them. Instead, what I'll do is on click of the plus symbol, I would remove all this stuff from here and just simply name it function here, which I want to open. For example, I would be creating a function called add at the bottom so I'll just name it as Add and the function symbol here, right? Okay, so when I click on this plus symbol, it should go to the function called add, which I'm going to create right now. So in the script tag, I'll just create a function called add here.

So to create a function, you need to name it function, space and the name of the function, so I'm just putting it add. And you need to just open the braces and all of a code that should happen when I click on this plus button should go inside it. Okay, so first of all, what I need to do is I need to detect the last letter. So I'll just take a variable here. So variable to create a variable you will write where and hit spacebar. You can name the variable anything but I would like to name it a city here simply, I don't know why am I naming it like that?

But whatever comes to my mind, I'm naming it you can name it, whatever Like your name, your uncle's name or something else. So I'll just put equal to and put zero here, I'm just initializing it. So I have just taken a variable, and I would be needing another variable. So I'll just create it along with it only. So I'll put a comma instead of semicolon. And I'll just name this variable as be, I guess, because to do Don't worry about this variable.

Why are we taking it I'll explain you when the time comes. So first of all, I have taken a variable. Now in this variable, what I'll do is whatever the value is in this textbox, I'll get it in that variable called AC t. So how to get it. I'll just put AC t equals two. And what is the name of the textbox. Here is the name of the form dot name of the textbox.

So it's F dot DDD. So I'll just put a city equals to f dot BDD dot, I need the value from the textbox. Right? So I'll just put the value here, and I'll put this semicolon to end it. So, once I have done that, now what I need to do is once I have got whatever is written in this, for example 123 was written or plus was written, then I need to detect what is the last thing on this textbox. So that I can check whether if it is already Plus, I wouldn't allow another plus to get added, or if it's already plus, and if I'm clicking minus, I want the plus to be removed and the minus to appear there, right.

So in order to do that, I need to check what is the last value. So to do that, what I'll do is I'll take the second variable be equal to and I will get the last value from this textbox into this B. So how to do that. So we have stored the textbox value into this a city right? So I'll just name a city dot, and I'll be using character here. So C hatch er, and capital A empty so it's a carrot function that I'm using here.

I'm applying carrot on this inside the bag. On this carrot function, I need to name a number which one I need to get. So I cannot always guess whether there are only four numbers or numbers or six numbers, right. So what I can do is, I could just put all of the length minus one that can be done textbox value is stored in a city already. So what I would do is AC T dot length minus one would get me the last one. So AC T dot length minus one, it would get me the last variable.

So if I want to check it once, what I would do is I would alert the alert, and I would put B here. Now let's click on plus and check it. Now just let's save it, reload it, I would put something click on plus and check it 32 it's giving me two here, right? And if I add some six, nine, and if I hit the plus button, now it's giving me the nine as the last time digit. So I hope that you have understood that it would get me the last thing of this textbox. Right.

Right now there is no need of alert here. So I'll just remove this and save it. Now that I have got the last value of this textbox I need to check whether is it equal to plus or minus or division or multiplication. And if it is equal to any of these, I need to remove that last thing and add plus here as it is add one, right. So imagine if it was minus, I need to remove this minus and put plus here because I have clicked on add plus symbol, right? So let's follow that.

So to check it I would use if else right, so I would put it in brackets. be equal to equal to, in inverted commas, we need to write plus and then or symbol here. And then again, b equals two equals two single quotes, again, we need to put minus here and then again, I would put our symbol here and then B equals two equals two in single quotes. So we have completed the place we have completed the minus, then we'll add some division here. And after that, or B equals two equals two, in single quotes multiplication, that is star symbol not the X, X key on the keyboard, which is asterik. You need to give that and if it is equal to one of these, what will happen will be written in this flower braces.

So what should happen is now if it is equal to something like this, I would just need to remove this last one and copy the rest of the code for example, there is 20 for example, there is some sorry for this For example, there is some 23 minus, what I need to do is I want to remove this minus and copy this 23. And after copying this 23, this is add function means I'm clicking on the plus button. So it needs to remove that minus and add plus here. I hope you understood the concept. So let's follow it. So okay, let's call it.

So here, what I would do is F dot DDD dot value equals two. So what I am doing here is I just said that the name of this textbox dot value means its value should be the value in the textbox should be equal to a CT, which is the same value here. I don't want to type again, so I'm just putting a CT, which means F dot DDD dot value dot here I'm using another function called substring. So substring and now inside the brackets of substring, what I need to do is I need to mention, for instance, I am having 1234 Five minus from these, what are the things that I need to get here means from which value to which value I need and which value I do not want to copy. So I need from one to five, I don't want this minus. So every time this number might not be same, there would be some extra numbers as well, right?

And at last there would be minus, so I cannot count and say it should be from zero to three, or zero to five or something like that. So what can be done is, again here, it should start from zero means the starting number, comma, it should go up to the length of the string minus one means whatever the text is in it, minus one means it will be the last one. So the same thing comes here. It's a CT dot length minus one, okay. So let's imagine it was 1234 minus, now what it has done is it has copied 1234 and removed minus from here. So there is no minus at present in this value and then I need to add as I have clicked on the plus button, I need to add plus At last it removed minus well and good, but it needs to add plus there.

So, what can be done is simply you need to add F dot d d d dot value plus or equals to the plus symbol. Okay. So, once you click on the plus symbol, what happens is inside a CT we are taking all this value and then inside b we are taking the last value. So, we are taking okay 1234, but it will take only the last one four, and it will insert it into the B. So, it will check whether b is equal to this plus minus or division or multiplication or not. If it is equal to this, this thing will happen, or else we need to write the else code which we'll write in a moment.

But let's imagine if there was at last minus, so I need to remove this minus and add plus instead because it was earlier minus it changed my mind and I am clicking plus. So the minus should be gone. And plus should appear right. So what I'm doing is F dot DDD dot value, which is the name of this textbox equals to means I'm setting this value equals to a city dot substring is it is nothing but the same thing f d f dot d, d d dot value, which is the name of this textbox dot substring, which I'm applying a function inside the brackets I need to mention from where till where I need. So zero means the first one, okay, it's taking from there, and then AC T dot length minus one means whatever the length of the string is, minus one means the last one, so it will just remove this one and only copy this thing here.

And then because I'm hitting Plus, I need to add press to it. So I've got DDD dot value, plus or equal to plus. Let's see it in action once. Let's save it and I'll put a minus here and I'll just hit plus. Okay. Didn't reload, I guess.

So I just want to three minus and I'll hit plus here. Now you can see that when I hit plus the minus is gone and plus has appeared here, but what if there was no plus at the last, so, this thing would not happen right, it would go to the else part. So in else part directly, if there was only 1234, it would directly Atlas because there is no minus or something, there is no need of removing that minus and adding plus. So I would just add else here. As what it should do, it should directly add plus to it, which is nothing but this quote, so we'll just paste it here Ctrl C, and paste it here. So we have returned successfully the code for the Add button.

Now we need to do the same thing with the minus division and multiplication. So what can be done, simply copy this whole function Ctrl C, and just go down and paste it and this time I would name it sub I guess I'll name this functional sub. And what is to be changed, only this plus symbol should change the minus and this one to minus as well. And again, I'll paste it at the bottom. And again, I'll just name it bi, I limit di. And I'll just change this to division symbol.

And again, this one to division symbol. And again, I'll just paste it again at the bottom. And this time, I'll name it ml for multiplication. and here also I need to put the star symbol and here also I need to put the star symbol and remove that plus, okay, going back to our form tag here, and we need to change this minus symbol to the function called sub soiler is this tall, and I'll put a sub function. So if I click this, minus it Call this sub function right where it will change it to minus in case there is need and I'll just remove this one and it will call di function. The same with the last one here.

I just remove it and it will call the malfunction. So let's save it and check it once. Two minus three equals two works fine. Okay, let's clear it up to minus now I changed my mind I'll hit plus now emitting plus the number of times but even c plus appears only once I have changed my mind again and I'll just put divide. So it goes to divide again, I'll change it to multiplication. If I hit multiplication again and again.

Now we can see there is no problem with that. Okay, so we have solved this issue right? Okay, now what to do next. I wanted jido by default here. As you see in a calculator, so you need to just add a placeholder there. So simply go to the type equals to text, which is the first line is this text box line, and give a space here and type placeholder and then put equal to and put zero there.

Now save it, you can either hit Ctrl S, or you can click save from here, reload it. Now you can see that zero by default. Now, two minus six equals to minus four. Once I hit this one, again, it comes to zero. For some people you might be facing problem with this, as you might have just put a space in between this one means where there is value called C. Here I have told you to just open a single quote and close it without any space. If you give space what happens is C, I'll put three minus five, and then I'll hit equal to when I hit C, there is no placeholder.

So just simply remove the gap from here. So that placeholder will be visible. Okay, so we have completed creating our calculator, and the design part is pending, which we'll see in the next video. So till then thank you

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.