Wednesday, June 1, 2022

Js A tough code explained

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Istring exercises 2</title>
</head>
<body>

    <section class="output">
        <h1>Live output</h1>
        <input type="text" name="thisIs" id="here"><button>Search</button>
        <ul>

        </ul>
    </section>

Inside the body is create 3 elements with HTML, and is an section that will have all the elements, because we gonna name the section to identify all the elements in the Js,

What was create in HTML: a section that have inside the 1)input of the type text 2)Button 3)ul - unordered list.

The section is named "output";

    <script>
        const list = document.querySelector('.output ul');
        const searchInput = document.querySelector('.output input');
        const searchBtn = document.querySelector('.output button');

In this part we are already inside the script (Js) and we make here 3 variables for out 3 elements, we find the ul by his parent and calling the ul .output -> is the name of the parent and after is write what depedent element of the output we talking about that is the ul, and of this way for the others so if I say '.output input' I am saying about the ul that have inside of the .output; and if I say '.output button' I am saying about the button that have inside the element that I create the class output (.output is because I create the class output inside the tag of that element if we had #output instead of have create a class we would have create an id).

        list.innerHTML = '';

        const myHistory = [];
        const MAX_HISTORY = 5;

in the 1st line we empty the interior of the list, the list is in the HTML the ul, 

in the second line we are creating an array that at that time is still empty.

In the third line we create an variable that we gonna use to inside our function to say that if our array be higher than 5 will pop the 'array element' that is in the bottom, we could say if myHistory >=5 pop, but was choice put the 5 inside an variable.

     searchBtn.onclick = () => {
            // we will only allow a term to be entered if the search input isn't empty
            if (searchInput.value !== '') {
                myHistory.unshift(searchInput.value);

Here was started out function this is one different way to create an function

the common is say function functionName () {block-code}

This searchBtn that in a variable that we already iniciate and is about the button that was create in the HTML, follow by an dot, that we could already notice that we say the variables and dot their method, that here is onclick, 

So until now we create an function that is searchBtn that is about the button of our document, so we create an function for our button, and onclick is what ignite the function of the button we don't only have click could be hover, 

we have after  =(); an function is function something() so an function have an parenthensys, so =() only could means that what came before is an function so I say that and point an parentheses to say that is an function; => is point to what is the function.

So I say something and point what this something is (an function) and after I point what this do.

So 1st I will say that value !== '', this is to say that my function only work if the value is different of nothing, if the button be clicked without a value how don't gonna have an else the button will do nothing so inside my function we only have function for the button if in the searchInput be entered something. 

So after is saying that myHistory that is my array will receive in the top of it what the user type in the searchInput, so the user write something in the input and push the button and what the user had typed in the input will be used after the button be clicked

                // empty the list so that we don't display duplicate entries
                // the display is regenerated every time a search tem is entered.
                list.innerHTML = '';

What is that line, and this is the tough part of the code because don't work write directly that put every single typing of the user because, will be work this way when the user type the second will be showed in our search list the second but also the first, so we can't write for each, we gonna erase all the time what is typed in the list instead of put inside itens of the list, so what we gonna do we gonna erase all the list everytime and place fill the items with the array all the time that gonna will look like that is writing every line at that time that the button is pressed but everytime the button is pressed we had empty our list and filled with all the elements of the array so we are erasing everything all the time but this isn't what look like

                //loop through the array, and display all the search terms in the list
                for (const itemText of myHistory) {
                    const listItem = document.createElement('li');
                    listItem.textContent = itemText;
                    list.appendChild(listItem);
                }

And this that is inside our function and came after we empty our list is the part of the code that we gonna present all the elements of the array in the screen, so the elements are also in the array, and all the clicks will make an loop that after erased what previously was inside the list, will be place what inside the array,  so the array is a monolito and the list is that way we erase all to write again more the last element, so you see that we gonna need an loop that we acquieve with an for, that for do almost all that we need so this is the solution, so the for will say all the elements if the array because is that what is said inside the parentheses (), and what is in the brackets {} is what I want to happens when we are saying what inside the array, here the counter is the size of the array because until we have elements in the array we gonna execute what is inside the brackets so one time we gonna have only one element so will performed once, other two so twice, in one time we gonna have 4 and will do that when our clock that is all the elements of the array be 4 will do this way, will create an 'li' for the 1st, will fill its context, will append this to the list, but we already have a 2nd so this steps will be executed again, so will create an 'li' and after will be filled with the itemText that is declared in the parethenses that is the each lonely one and after this will be append in the list, but we have the 3rd and all that 3 steps will be done again, an we have the 4th and all those sptes will be repeat for that too.

                // If the array length is 5 or more, remove the oldest search term
                if (myHistory.length >=MAX_HISTORY) {
                    myHistory.pop();
                }

And this if is inside the other if and not after, and this if do that it will pop out of the array one element of the bottom after we reach 5 elements, so we only gonna have 5 elements because our array receive more one item but one of the bottom gonna be remove.

And this way we are writing in the array and the array is writing in our list.

                // empty the search input and focus it, ready for the next term to be entered
                searchInput.value = '';
                search.focus();
            }
        }
    </script>

So to end that code the first code line after the first line that is a comment we say that everytime we click our button the searchField that in the document is the entry that we write what we gonna search will be empty, if we don't do this way the user after click the button gonna have to delete what is in the box to write the new value. And the last code line when say focus is means that the user don't have to click with the cursor of the mouse in the field the text, the focus will be there and after click the button the cursor will be inside the text field and you just have to write in the keyboard without need before put the cursor inside the field is already there. Rute Bezerra de Menezes Gondim






Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)