Auto news on Youtube May 22 2018

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.

For more infomation >> how to build a smart calculator with voice input - Duration: 11:22.

-------------------------------------------

✅ Hyundai's N Performance boss, Albert Biermann, has ordered engineers to build a mule version of a - Duration: 3:25.

Hyundai's N Performance sub-brand has its sights on the Kona, the automaker's brand-new compact crossover, for its possible next makeover

If it meets with the approval of Hyundai brass, it'll reportedly do 247 horsepower courtesy of the 2

0-liter turbo engine borrowed from the i30 N. Hyundai's N performance boss Albert Biermann tells Auto Express he has instructed his engineers to develop a test mule version of the Kona to consider for production by the end of the decade

"I've told them to build the car and we'll see what happens with it getting approved

It has to be the i30 N powertrain, really," Biermann told the British website, adding that engineers could give the Kona different suspension and steering specs

The i30 N is Hyundai's not-for-America performance fastback and the N division's first offering

It's based off the i30, an overseas version of the Elantra GT, offered in three body styles — hatchback, wagon and "fastback" sedan — and fitted with a six-speed manual transmission

It has two engine options: the aforementioned 2.0-liter four-cylinder and a version generating 271 horsepower that will power the Veloster N, which will come stateside

By contrast, the Kona has two engine possibilities: a 2.0-liter four-cylinder that makes 147 hp and 132 pound-feet of torque, or a 1

6-liter turbocharged engine that does 175 hp and 195 lb-ft of torque. So the N upgrade would represent a significant boost in power over either of those engines

What other features could a Kona N offer? It could go the N route with a large grille, red-trimmed undercarriage, specialty badging and interior trim and suspension upgrades

Auto Express says upgrades could include a rear diffuser, small roof spoiler and exposed rear tailpipes

Hyundai has sold 5,874 units of the Kona through April since going on sale in February

It also plans an all-electric version for 2019 that will only be offered in the longest-range version in America, which is estimated to go 250 miles on the U

S. test cycle. That version will also be offered in Europe where the estimate is 292 miles of driving range

An entry-level Kona Electric will also be available in Europe with and estimated 186 miles of range

Related Video: