how to build a smart calculator with voice input

how to build a smart calculator with voice input

Hi Everyone. Welcome to code spot. This is Abarna. I am a front end web developer and in this
tutorial we’re going to see how to build a smart calculator that can take voice input. In the previous tutorial, we saw how to create
a basic calculator using javascript. by the way the links to the code & the tutorial for
this basic calculator will be mentioned in the description box below. in this tutorial, the basic calculator has
been enhanced to accept voice input. You will learn speech recognition in Javascript. You will learn how to create this bubble effect
in CSS. Also, you will learn how to create a tooltip. let me demonstrate, when i say 2+3. It recognize the voice & prints the output. Let’s try again. now i say 9-4, it prints the output. Well, similar to my previous tutorial, here
i use brackets as the code editor & live preview option to see the output as we code. let’s start with grouping the history & output
section of the calculator. I put them under a div container with output-text
as the id. Now I specify a separate section called output-microphone
for the microphone icon & the tooltip. now, let’s style them. Let’s go the CSS file, and first I’ll make
visible hidden for tooltip. We’ll come back for it later. For now, let’s style the output text & microphone,
so they would appear next to each other. I specify the width, height & float for both. Now for microphone, i give background image,
Not visible because the file size is bigger. So let’s give background width, so the image
covers the dimension that we’ve specified. let’s make it round by specifying border radius
as 50%. Also give this a basic margin. I give margin-top separately so it would appear
in the center. Now for bubble effect. for animation, we use @keyframes followed
by animtion name. At starting , i want the image to shrink a
lil bit & at 70%, the border radius will grow to 10px of the same color with opacity 0.4
and on full, the border-radius is 0. Let’s specify the animation to the microphone. First the animation name, the time for each
round & infinfite to repeat itself. There’s the bubble effect. the sides grows 10px at 70% & shirnk back
at 100%. Now, I’ll put this animation attribute under
another class called record. WE’ll come back to it later. Now for the tooltip for the smart calculator
describing the steps. let’s give the width & font-size. as you can see, the font -size is reduced. lets give position absolute. Now, its goes to top left corner. lets give the bg color, font color & some
padding.lets bring it down by specifying top & bring it to the left using transform property. Also, give a border radius for curved edges. Let’s change the top prop untill we get the
desired position. Now for the little triangle that points towards
the microphone. lets use before selector. This would basically add content before the
element. let’s give position absolute & border-width.
if i specify border style as solid, it would be visible. well, there u hav it, the small box at d starting
of tooltip. now let’s give the background color. Now this changes the square to triangle. For demonstrating it, i’ll give the color
as black & a bigger border-width.there’s the triangle. let’s open up the console. go down to the triangle element. Below, in the prop, u can see the order is
top, right, bottom, left. so if i specify right as black & rest as transparent. the arrow points towards left, the opposite
side. now, lets specify the bottom as black. now the arrow points upwards. You get it. alright, let’s change it. Now, lets give margin-left as -10px so the
arrow goes past the padding & towards the mic. now, let’s change the color & the border
-wid. There you hav it. the little traingle. great!!. now the tooltip initially is not visible. So, let’s mention that. It is made visible when we hover over the
microphone. alright. perfect. Now for the speech recognition. lets get the microphone using getelementbyid.
when i click on the microphone, the recorsing must start. so lets specify on click prop. for recording,
we use The SpeechRecognition interface of the Web Speech API. we create a new SpeechRecognition
object instance using the SpeechRecognition() constructor, start method will Start the speech
recognition service listening to incoming audio. onrsult event handler will be Fired when the
speech recognition service returns a result, as in it fires when the user stoped speaking. let’s get the transcript of the speech recognition. let’s print it in the console. Now i say “hello world”. Let’s open the console to see if it has printed
it. Oops! it throws an error. WEll, Let’s see. Alright, Let’s first set the language for
speech recognition as “en-US”. And also its “results” not “result” for transcript. Lets check now. Now i say “2+3”. Yes it works. Again. Now, i’ll say “hello world”. it prints hello world. perfect. Now the smart calculator records our voice. now lets use this to manipute the basic operation
of the calculator. First, I set the voice input to the output
text & after 2s we’ll override this output text with the result. so i use evaluate function here. this function will be executed after 2000ms
or 2s. under evaluate function. we need to evaluate the voice input, before
we print the result. its simple. we’ll put our evaluate function under a try
catch block. if it works, it will print the result. if it doesn’t it comes to catch block where
the output is set to empty & the exception is printed into the console. let’s test this. I say “2+3”. It waits for 2s & prints the result. Ok. Now for the bubble effect. If u remember, i gave the animation property
under record class. So, at the start, i ll add record class to
our microphone & at the end I’ll remove it. so once its over, the bubble effect wil stop. let’s see. Now I say “5+3”. The bubb eff starts & end through the speech
recognition process. Now, if i say “5 multiply 3”. It prints it as text. So, this goes to our catch block & prints
nothing. To fix this, I create an object with operation
name & the operator accordingly. Now, I’ll loop throught the object & replace
all the property name that is the operator name with the property value that is the operator
itself. Now, I say “5 multiply 3”. It replaces it with the operator & prints
result. let;s try, “7%4”, it works. Again, “8 /2”. It prints 4. Alright. everything works fine. There’s the smart calcultor with voice input. Now, using this speech recognition, you can
develop more complex algorithms as you wish, to make it much convinient for the user. That concludes our smart calculator tutorial. Please give it a thumbs up if u liked it. Share your feedback in the comments down below
& subscribe to code spot for more such videos. Thanks for watching.

12 thoughts to “how to build a smart calculator with voice input”

  1. These are great tutorials. Please make more videos if you can. Is it possible to build a screen recording app with javascript ? if yes, it would be great if you can show us how it is done.

  2. Thank u mam …..There are very few people who explain word to word….And the best thing about you is that your content is also different from others

  3. Where could I find more animations like those of the microphone you showed? Is there a tutorial on creating such animations?

Leave a Reply

Your email address will not be published. Required fields are marked *