Your first program
Before you start: after clicking the following links for exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.
So what is the task...
Using the already acquired knowledge, we can create a simple, but useful application. If you do not remember the order of planets in the Solar System, our application will remind you. When the user starts it, they will be able to enter the number of the planet, in other words its place in order from the Sun. Then the user presses 'search' and finds out what planet it is. For example, the user enters the number 3 and we display the information that the Earth is the third planet from the Sun. Simple, isn't it?
1) Let's first build an array consisting of the names (strings) of planets. Planets should be in the same order as in the Solar System. For the record, the order of planets is:
Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune
2) We assign our array to the variable planets.
3) Next, we will create a function that will ultimately display the appropriate planet. Let's call it searchPlanet.
We do not have to worry about connecting this function to the "Search" button (part of HTML and CSS is already prepared at this stage).
4) We copy the two following lines of code and paste them at the beginning of our function. They are used to connect our JS with HTML - to read the digit entered by the user of the application and to display the result to the user.
var userInput = document.getElementById("userText").value;
var result = document.getElementById("result");5) Under the lines above (still in our function) we create a loop.
Why do we need a loop? Thanks to it, we can automatically check and assign planets to a given digit. Remember about the right number of iterations.
Tip: the number of iterations depends on the length of our array. If you can not do this part, take a look at the lesson about loops, especially the example in which we associate the number of repetitions of the loops with the length of the array.
6) In our loop we will check if the number entered by the user corresponds to one of the planets in the array.
Therefore, we will use the conditional statement if. Our logic is as follows: if the number entered by the user (remember that we have assigned it to the userInput variable) equals the counter of our loop, i.e. i (actually i + 1, which is shown below), we assign the right planet to our result (remember that we assigned it to variable result).
Tip: pay attention to the condition that we construct, and more specifically, the equation operator. As a reminder, the single equation "=" assigns a value, the double equation "==" checks whether the given elements are equal in value and ignores the differences in the data type (e.g. 2 == '2' will return true), triple equation "===" additionally checks if given elements are of the same type (e.g. 2 === '2' will return false). By typing a number in the field, does the user enter a string or a number?
Tip 2: note that if the counter of our loop is initially 0, then our equation must be adjusted. Therefore, we will not compare what the user entered with the counter, but with counter + 1, because we do not want the user to count the planets from 0.
Tip 3: if we use our result variable to display the planet, we should give it an additional innerText (or result.innerText) method.
Congratulations!
Your first program is done.
