Now, to practice more JavaScript
and explore loops in more realistic examples,
I attached another ZIP file,
this loops-in-action ZIP file,
which you can extract to get this folder
with this HTML and this CSS file, which you see here.
And these are the two files we will work on
and a JavaScript file, which we will create
over the next minutes.
So we can ignore the other content
of this project folder for now,
that's what we will continue working on.
So simply add this extracted loops-in-action folder
to your overall project folder
in which we've been working,
and then as before,
simply open the index.html file
with that live server extension
so that you see it on the screen.
And that is the example I showed you a little bit earlier
in this course already but without any functionality.
Clicking these buttons doesn't do anything
because that is exactly what we will work on.
And therefore, let's now work on this together.
And here in this first example,
we wanna build a simple calculator
where we can enter a number here,
and when we click that button,
we add up all the numbers leading up to this number,
and output the overall sum here in this box.
For this in this index.html file,
in this loops-in-action folder,
I got this paragraph with an id of calculated-sum,
which currently has no content
between the opening and closing tags
because that will be the paragraph,
which I later wanna target
to output the result there.
And of course, we also need to gain access
to that input field here
to read the value the user entered,
and we then also need to add an event listener
to this button to act upon a click
and work with that entered input value.
And therefore, that's what we'll implement now.
For this, I'll add a loops-in-action.js file
with dashes between these words
since this is how we commonly name our files
in web development.
All lowercase with dashes between individual words.
And, of course, I wanna include that file,
I wanna link to that file
from inside my index.html file,
and therefore here, in the head section below the link,
I will add script tags,
and add the src attribute to point
at this loops-in-action JavaScript file
and very important, add this defer attribute
to make sure that the script is only evaluated
and executed once the entire page code has been parsed
and loaded by the browser.
Now we can save this index.html file
and work on this loops-in-action.js file.
And here to solve this first task,
as I mentioned, we wanna get access
to the button, to the input field
and to this paragraph.
These are the three elements we need to get access to
to work with them.
And then we'll need to act accordingly
when the button is clicked.
Therefore here, I'll start with the First Example
where we sum our numbers.
And I'm just adding the comment here
so that this overall JavaScript file stays structured
and is easy to understand.
And then here, I'll first of all create a new constant
in which I wanna store my button
to which I wanna reach out
because I'll need that button to add the event listener.
And that could be the calculateSumButtonElement.
The name is up to you
but I think that is a good description
of what we will store in this constant.
And the question now is how do we get access
to this button.
It does not have an ID
but, of course, we could add one,
and that would be perfectly fine
so that we can then select the button by ID.
But we could also use querySelector.
And you learned that querySelector,
when we use it,
actually selects the first matching element.
So here I could select button like this
and that would work because in the HTML file,
this is the first button in the overall document.
We got more buttons
but they come after this button.
So actually using querySelector button here would work.
But we could also be a bit more specific
in this querySelector,
and there in this CSS query code, which we pass to it
to make sure that even if we would add another button
in front of it in the future,
we still select this button correctly.
And here we could utilize the fact
that on this section that wraps the button,
we got this id here, calculator.
And I did mention that what we pass to querySelector,
in the end should just be a valid CSS selector.
So what we can do here
is we can also select the ID, calculator, oops, calculator
with the hash symbol.
That's the CSS ID selector.
And then a blank and then the button tag.
And that means we wanna select the first button
inside of an element with the ID calculator.
And that's a more specific way
of targeting exactly this button
and now even if we would add another button here
in front of that button,
we would still select this button
with this querySelector code
because we have this extra selection criteria here
of only taking a button that's inside an element
with the calculator ID.
This, of course, is not related to loops
but this also is a general JavaScript practice
and that's why I wanted to emphasize this as well.
I'll get rid of this extra button here though.
So now we've got access to that button,
and here we can now use that calculateSumButtonElement
to add an EventListener,
and that should be a click event
to which we wanna listen, of course.
And we wanna add a function here,
which we execute when that button is clicked.
And that could be the calculateSum function.
That would be one possible name
because that's what this function will do
and then here, we point at this function by its name.
So no parentheses here.
Instead just pointing at the function by name.
So now here we've got this function
and in this function,
we now need to get access to this input value here.
For this, we can get access
to the input element here inside the function code
and store it in a constant.
And that could be the userNumberElement
because this is the element
that holds the user's number
or userNumberInputElement to be even more precise.
The naming, of course, is up to you though.
And we could also create this constant outside
of this function
and that would also be perfectly fine.
I'm just doing it here inside the function
to also show you that this is a valid alternative
because we will only use this constant inside
of this function.
And if we'd never use it anywhere outside of this function,
there really isn't a strong reason
for defining this constant outside of the function,
though we can do it and it also wouldn't be a mistake.
And here we can now select this input element
by the id, which we have here, user-number,
and therefore, we can use
document.getElementById user-number like this.
This allows us to get the enteredNumber
and we can store this in an extra constant
where we reach out to the userNumberInputElement
and we learned that these InputElement objects
in JavaScript have a value property,
even though I'm not getting auto completion for it.
I'm just getting nodeValue, which is the wrong one.
But we will have a value here
because this is an InputElement.
The IDE just doesn't know it
and that's why we don't get the auto completion.
But we will have a value property,
which holds the entered value the user chose.
And that's our enteredNumber then.
Now it's time to sum up all the values leading up
to that number,
and that is a task where we can utilize JavaScript loops.
Here I wanna build my sumUpTo the number chosen
by the user.
And I start at zero here
but then I wanna write a loop
where we continue repeating code
until we reached this entered number.
And that's a place
where we can utilize this regular for loop.
So not for of and not for in
but the regular for loop.
And if you remember,
we wrote such a loop by using the for keyword,
then parentheses, we'll put some code into those soon,
and then curly braces with the loop code.
And here between those parentheses,
I will create a helper variable
to which we have access inside of the loop,
which I will name i because that's kind of the convention,
and here we can start at zero.
Then we add a semicolon.
We wanna keep looping as long as i is smaller
or equal actually than the enteredNumber.
So the number chosen by the user.
And after every iteration,
I wanna add one to i
because if we do it like this,
then i will be every number
from zero up to that enteredNumber
and it will change with every iteration.
And we can then simply use sumUpToNumber,
this variable, which is zero initially,
and assign a new value to it,
which is why this must be a variable
and not a constant,
and the new value, which we assigned
should be the previous number,
the previously stored sum plus i
because i will be a different number in every iteration
and it will be every number up to that enteredNumber.
And because we have smaller or equal here
as a loop condition,
i will also be equal to that enteredNumber eventually.
And therefore, once this loop completed
and once code execution reaches the next line of code
after this loop,
sumUpToNumber will be the sum
of all the numbers up to the enteredNumber,
and now we just need to output it,
and for this, we need to get access to this paragraph,
and we do get access by using this id here, for example,
which we have on this paragraph,
and again, I'll just get access to that element right here
in the function when we need access,
and here I'll then get my outputResultElement.
That could be a name.
And here we can use document.getElementById.
And get access to it like this.
And then once we got access to this element,
we can use this outputResultElement
and set the textContent to sumUpToNumber.
So to that number we derived here.
Now, that will not be all that we have to do
because if we have a look at styles.css,
we can actually see that this calculated-sum element
has display: none initially
so that we don't see the empty result box initially
and therefore, we'll have to change that as well
and I'll quickly do that by just reaching out
to style.display here
and setting this to block,
which ensures that this will be visible
because it's no longer display: none.
And with all of that done,
we should have the finished code for this first example.
If we reload this page
and I enter five and click this button,
then we should see 15 as a result.
And that is correct
because the sum of all the numbers up to five,
including five is five plus four equals nine
plus 3 equals 12 plus 2 equals 14
plus 1 equals 15.
And you can play around with that
and calculate different numbers here
and that is therefore, this task solved.
That's this first task or this first exercise implemented
with help of such a regular for loop.