So we're able to gather our pile input value and print it to the console.
But of course that's not ultimately the idea.
Instead the ideas that we gather all our input values quickly validate them and then do something with
them.
For that I'll add yet another new method and no private method because I'm only going to call it from
inside the class and that's to gather user input method name is totally up to you.
My idea is that this method gets called here after we prevent the default.
This should basically reach out to all our inputs here gathered a user input they're validated and then
return it.
So Dad Here I got my user input which could be a tuple with the title the description and the people
as the free tuple values.
Actually I liked that idea.
So let's.
Already define a return type here.
The return type is a tuple.
Now do you remember how a tuple is defined how the type of a tuple is defined.
It's not the string square brackets.
That means you're returning an array of Strings instead I want to say that I return an array of exactly
x elements of exactly these three types.
And for that you set that a return type here to square brackets and then inside of the square brackets
you add the different elements and element types for example String string and number with Dad you're
saying this method here returns a tuple which has three elements where the first element is the string.
Second element is a string.
And third element is actually a number.
And now we can add some logic to this method to make that become true.
So for that let's first of all get the entered title from this title input element of value and we can
repeat that.
We all want the entered description of course from this description input element value and the entered
people amount or just entered people from this people input element.
Now I store does and constants so that I don't always have to repeat these longer expressions.
Now we can validate this a trivial validation would be to check if entered title trim.
So removing X is whitespace at the beginning an end.
Length is equal to zero or if entered.
Description trim length is equal to zero or if entered.
People trim length is equal to zero.
That would check that no input is empty now.
It does not check everything.
We might want to check though we are not checking whether entered people is let's say a positive number.
We're not able to set a minimum length.
We would have to add more and more conditions here and whilst we can do it as this would not really
be a scalable solution if we have our parts in the application where we also want to validate user input
we always have to repeat long if statements.
So I won't come up with a smarter validation solution or a more scalable validation solution soon.
For now we can leave it like this.
You can already think about this though and of course after this lecture here pause and think how you
could outsourced is into a separate validation function which is configurable and how types could help
you there.
There are definitely many possible approaches and I will share mine with you in the next lecture.
But before we make it there let's actually use this trivial approach here and do something.
If all these conditions are is satisfied now if we make it into the safe block we know at least one
validation failed and then we could throw an alert where we say invalid input please try again else
if we don't make it in there we know we do have a valid input else I want to return my tuple.
So here I want to return to enter to title the entered description and also entered people now as you
can tell though typescript is not happy because entered people should be a number not text and actually
everything you extract from the value property of an input element will be text by default.
So to turn this into a number we can call parse flowed for example or simply add a plus in front of
it and this will convert it to a number and still typescript is not happy because while we not always
return a tuple.
What about this part here.
If we make it into the F block we're showing an alert but we're not returning a tuple.
Well there are various things we could do instead.
We can just return nothing like this.
Alternatively we could throw an error then we would actually not return anything bad will throw an error
in that case.
Now I don't want to throw an error here because I don't really want to implement error handling.
So what I'll do is I'll just add a return statement.
But of course this is not a tuple.
So actually the return type up here is a tuple or it's actually on the find.
Now however as you've learned you shouldn't use undefined here as a return type on functions.
Instead use white.
It's almost the same but exclusive two functions.
And this tells typescript that this is a function which has at least a branch which does not return
any value like this one does.
Here we all of course use a union type because we have both possibilities.
We might return nothing or we actually return a tuple.
So now we have gatherer user input and user input therefore also is either on the find in the end or
it is that tuple.
So now before we move on and improve validation let's build up on that user input when we gather the
user input down there.
We now have that user input thing and now we can check if it is a tuple.
Now the problem is at runtime we have no way of checking whether it does a tuple.
There is no instance off we could use.
There is no tuple type.
We could check.
We can all and not check if type of user input is equal to tuple because that does not exist in vanilla
javascript string does exist for example but tuple is not a javascript type so to check whether it is
a tuple we have to remember that tuples in the end are just arrays there especially in typescript but
once we're in JavaScript land they're just arrays because the idea of a tuple where the number of elements
and the types of elements is fixed really only exists in typescript.
So during runtime all we need to check here is whether it's an array and for that we can use the array
object in JavaScript and there is array method.
That's a method built into an ELA javascript which allows us to check whether this here is an array.
We know it's even undefined or a tuple a tuple is an array.
So if this returns true we got the tuple and then here we can use to structuring for example to get
the title the description and the people out of user input and then do something with that input.
For example for now console log title description and people if we do all of that and we save it all
it compiles with no errors and if we go back here and I click Add project like this I get invalid input
if I enter Hello still get it because we got no description.
This is a description we still get it off course but if I now also enter something into people this
works and we print is here.
Now that's of course a nice step in the right direction.
We're not entirely there yet.
As I said we can improve validation.
Just one thing I want to do right away before we do that I want to clear all the inputs.
After we click Add project so I want to empty all the inputs again.
Now for that we can add a new private method clear input or clear inputs.
And there we can set this title input element which is thought value equal to an empty string and repeated
for the other inputs as well.
So here we have to be description input element.
And here we have the people input element and now we call this cleaner inputs here we should make sure
that the form is cleared once it is submitted.
So if we try this again enter something here you'll see it's printed here and the form is cleared.
And with that I'm generally happy with how we handled this but now I want improved validation and right
does in a more reusable scalable way.
As I mentioned definitely feel free to do this on your own first in the next lecture.
We'll do it together.