Original subtitles

Welcome to the first coding challenge of this section.

And this one is gonna be an exciting one.

Because in this one,

we are building a simple Pol application.

So a pol has a question,

an array of options from which people can choose,

and an array with the number of replies for each option.

And this data is stored in this object here

that it already created for you.

Now you can copy this object from here,

or you can get it from the final code

that's available for the section in the GitHub repository.

Now, okay, so you see, we have to question,

the array of options, and also a new array of answers.

So this code here,

we will learn how it works in the next lecture.

But this will create this array of four zeros.

And that's because there are four options here,

for this question.

And now, here are your tasks.

So first up in that poll object,

create a new method called register new answer.

And this method does two things.

So displays a prompt window

for the user to input the number of the selected option.

And here, I want the text to look exactly like this.

Then,

based on the inputted number,

so the user should input either zero, one, two or three.

So based on that, update the answers array.

So if the user,

gives three here,

as the option,

then increase the value at position three of the array.

And of course, increase that by one.

To do this, make sure that the input is actually a number.

And if that number makes sense,

then I want you to call this method,

whenever the user clicks on this button.

And so this is where the second button here,

comes into play.

Then number three, create a method called display results.

And this one, should, as the name says,

display the results of the poll.

Now this method takes an argument called type.

And that type should be a string, as I say, here,

and the value of that string should either be string,

or array.

So these are two different ways of displaying the results,

basically.

Now, if the type is set to the string of array,

then simply display the results array as it is,

using a normal console dot log.

And this should actually be the default option.

All right. Now, if the type is set to string,

then display a string like this one here.

Okay. And then once you have this method built,

run it each time after the register a new answer.

So essentially,

whenever someone clicks on this button here,

it will call this;

there's register a new answer method.

And then this method itself will call display results.

Okay. And to do this,

use as many of the tools that you learned in this section,

and probably also the last sections,

and really all the course itself.

Now, there are a lot of moving parts in this challenge.

And it might not be as straightforward as it seems here.

So if you need to cut some corners,

and make some things a little bit easier,

then that's absolutely no problem.

At least just write some code on your own.

That's really my main goal with this challenge.

Then if you manage to do these challenges,

or to do the challenge as instructed here,

then I also have a bonus for you.

And so that is to use these display results method,

that you built before to display these two arrays,

that we have here in the test data.

Okay. So usually,

you simply use this method to display

the answers array that's inside of the object.

But here, I want you to really display simply this array,

and this array.

And of course,

do not put this array here inside of this poll object.

Okay, you should use them individually.

Now, for doing this,

you have to really think about

what the disk keyword should look like in this situation.

And then you need to,

and then you basically need to set this keyword accordingly.

Now, okay, so that's a nice challenge here,

and one thing that is certain is that,

your code will look different than mine.

I'm just a normal developer like anyone else,

and everybody writes their own code.

And so my code is different from everyone else's code,

probably.

And so yeah, that's completely normal,

if you are starting to develop your own style.

So take maybe an hour even to do all of this,

and then come back to this video to check out my solution.

So let's get to work here. I hope it went well for you,

when you try it out on your own.

And you can always share your experience in the q&a area.

Anyway, let's now get the answer here.

And so for that we use prompt.

So const,

answer,

prompt.

And so, let's see what it has to look like.

So it's just a question,

then it's a new line,

then it's these options,

another new line, and then right up to number.

So this part is always the same.

So I'm just copying it from here.

So, we want to grab the question first.

And so that is,

this,

dot question.

Then the new line, which is this, remember,

then we want the options.

And so one new line for each of these options here.

So this is an array, we want to transform it to a string.

And so for that, we use the join method.

So this one we learned about in the previous section.

So I hope you remember this one.

And so we take the options array here and join it.

And we do join it again by the newline character.

Now, okay, and then finally, another new line.

And then this part.

Now, right? Oh, and then we of course,

also need to convert this result to a number.

All right. So this looks good.

Let's just add a comment here. So this is get the answer.

And then here second, is to,

register.

I think that's,

what we had here.

So the first step is to get the answer.

And the second is to basically update the answers.

So I'm just calling that register the answer.

Okay, but here, let's actually start by trying it out.

So let's do for now, poll dot

register new answer.

And indeed,

this is exactly the formatting we were looking for,

let's say three. And indeed, we get three.

Nice.

And so now let's register the answer.

And remember that we should check,

if this value is actually a number.

And also, if it makes actually sense.

So in terms of the number of options.

So first, we check if it is indeed a number.

And there are better ways of checking this,

but more about that later.

And we also want to know if the answer,

is below the length of this array, basically. Right?

So if the answer is 10, then that doesn't make any sense.

And so it must stay below the length.

So the length here is four.

And so the max reply that we accept is three.

So answer needs to stay below this dot answers,

dot length.

Now here, we could not do an if statement,

and basically saying that if this is true,

then increase the answers array at the correct position.

However, instead,

this is actually a great use case for short circuiting,

with the end operator.

So let's simply do this. So this dot answers,

and then we go to the position of answer,

and then simply increase it like this.

Now, all right, so if this is true,

then the end operator will keep going. Right?

And so then this is evaluated, and if it's still true,

then this here is executed.

But if either one of these conditions here is false,

then the end operator will short circuit,

and this part here is not executed.

So this is a nice use case for short circuiting,

because the code that we want to execute,

is just one simple line of code.

Now, okay. So now let's,

then,

take a look at the answers.

So this dot answers.

So this is for now, the register a new answer method.

And now let's focus here on point number two,

which is to actually call the method,

whenever we click on this ENTER button here.

So,

let's select that button,

document dot query selector.

And now we need the class name.

Let's check that out here again, in the elements.

And so it has the class of poll.

So poll,

dot @ event listener.

Click, and now the function that we want to execute.

And so that is @ poll

dot

register new answer.

All right. Now, do you think that this will work like this?

And let's give it a save, actually.

And there is an error.

And that's because we're trying to read property join,

of undefined, right here.

And so the problem here is, as you might have guessed,

because we talked about this before,

is that the disk keyword right now, points to this element.

So to this poll button here.

And so again, there is because in an event handler function,

such as this one here,

that this keyword will always point to the element,

to which it is attached.

And so right now, there is this button.

So to fix this, we need to bind the disk keyword.

And in this case, we need to set it to the poll object.

And so then, in this function here,

which is the result of the bind method,

so in this new function,

the disk keyword will then point to the poll object.

So let's see that, and now indeed, it works.

So that's input zero here.

And indeed, we already get our array,

where the count of the answers in position zero,

has increased. And if we try this, again,

it should become two.

And it does.

Now, in order to actually display these results,

we should create this new method called display results.

Now, right, so it takes a string that is called type,

with array being the default here.

Now, right.

So let's do this.

And also keep in mind,

that this is the kind of string that we want,

if the type is string.

So let's copy this one.

And now here, we add that new method called,

display,

results.

And so it gets the type.

And remember, it has the default set to array.

And so here, we can use the ESX default parameters,

using this equal sign.

So,

if,

type equals,

array,

then simply log,

this,

dot,

enters,

to the console.

Else,

if,

the type equals,

string,

then we want to log something like this to the console.

So once more a template string, or template literal.

And actually this would be outside

results,

are.

And then to create this here,

we can simply join the array together to form a string.

So that's this dot results or actually answers,

dot join, and we join them with a comma and a space.

Now, okay, and so now here,

let's get rid of this console dot log.

And instead, we will now call this method.

So this dot display results.

And that's actually called twice.

Once without passing any argument,

and then here passing in,

string,

and so then we will see both types of results,

printed to the console.

And so this is,

number four here.

So, let's give it a save.

Zero. And, indeed, it works just the same.

Number three,

let's try,

three again.

And so indeed, it works just fine.

Let me now input something else.

And so then nothing changes here.

So the results are not updated.

And that's because of this testing logic that we have here.

Great. So I hope you have been following this far.

So this is similar to what we have been doing.

And now let's check out the bonus here.

So let's use the display results method that we just use,

but to display these two arrays.

Okay, let's copy them just,

so we don't have to scroll so much.

And it says here that we should think about,

what the disk keyword will look like.

So we will do that, of course.

Okay, so these are the arrays that we're gonna work with.

So,

the method is at Pol dot display results.

But as I said,

now, we want to call,

this method here, not with this array.

So not with the answers array, but instead with this array.

So what should we do here?

Well, we will have to use the call method,

because we will need a new disk keyword, right?

Because display results uses this dot answers.

Okay, so the answers come from the disk keyword.

And so if we want to have a different disk keyword,

then we need to use call.

And what should the disk keyword be like?

Well, we need an object,

which contains the answers property here, right?

Otherwise, there is no way for this method,

to call this dot answers.

And so we can simply create a new object,

and say, answers, and then,

this,

this array, and that's it.

Let's try this.

And indeed, here is the result printed.

And that's even now passing us the, the string option.

And so now Indeed, we get poll results are,

five, two, and three.

All right. So again, to recap, this works,

because this function here is looking for this dot answers.

But our array is, well, it's simply out here.

So we need a way to make this dot answers,

equal to this array.

And so that's why we used to call method here,

so that we could manually set the disk keyword,

to a new object,

which as the answers property has that new array.

And now let's just try it with the other one here.

And,

and we can do the same without the string,

and then it will just lock the array itself.

And yeah, that works just fine.

Great.

Now, what we did here, it's not really a real scenario,

but it's still good for us to use these concepts,

in some different ways,

to really get used to how all of these concepts,

work together.