Andersen

Website lesson 9: real communication

Yuri Filatov's photo
Yuri Filatov
·

4 min read

fb_img_1200x630-1-13-1-1024x538.jpg Welcome back!

In the previous lesson we ended up talking about js basic functions. Hopefully, I gave enough time to get well known with js structure and methods. Remember, I'm here not to talk about the meanings, cause it is all free available on the Internet. My goal - to show everything on the example of one simple project.

We have been imitating communication = not real users. But the visitors of the website need to press buttons for example to call these functions, that's what I call real communication - functions are in a waiting mode.

That's why you need

  • Functions edit, add, remove posts are for authorized persons (of course), that's why you have to make a new page with its layout by using Moqups , for example.
  • The registration page should have log and pass, the data will be collected in the mass again (as the posts). And again validating function to check the equals for the log and pass.
  • Moreover, you need a function to check (if it's a registration), if the log is already used, again checking in the mass (our data).
  • Of course, buttons! Button to log or button to registrate (different valisating functions + add data function same as add post)
  • If it's a user's mode, then a list of filters on the page with posts, a button to apply or just by clicking the value of list to call the appropriate function (get post by filter)
  • Then if you feel comfortable working with buttons, you can add more, as an example: buttons for social media, buttons to react

Connecting js and html file

Why not with css? Css is already connected with html, so it's like a chain of connections.

Write in the head part:

<script src="name_of_your_script.js"></script>

You can write this way if only your script file is in the same folder with the html one, in another way you have to write its direction.

What goes next?

Decide which part of your body is for script (Where do you need a script part?). Then, you just as other tags write its name - script. Now it is like a usual tag you work with.

<script> ... </script>

What for do we need a js part in the body part (on the example of my simple project?)

  • Your posts mustn't be collected in html. Why? Imagine: your site contains permanent posts, you have initialized in html. Then the user clicks to get a post by filter and what he gets? Same permanent posts, cause they are in html, not in js + this get post. So we have to make them temporary. That's why they are collected only in js, not in html, so delete the part in the body, where your posts are collected.
  • I want to call script functions, for example, in the part with icons (to react) in the html file so that the user clicks on a heart and my functions fill this heart with the red color, so as the result we have: the user liked a post.

JS function to show posts

printProduct(data) {

        `div_element.innerHTML = "";`

        `data.forEach((product, ind) => {`

            `div_element.innerHTML +=``

    `<table>`

    `<tr>`

    `<td>`

    `<img src="6.jpg" width="170px" height="170px">`

    `</td>`

    `<td>`

    `<p class="text">${product.destination}</p>`

    `<br />`

    `<ul>`

    `<li>${product.tag}</li>`

    `<li>${product.flug}</li>`

    `<li>${product.createAt}</li>`

    `<li>${product.author}</li>`

    `</td>`

    `</tr>`

    `</table>`

        ```

        `});`

        `}`

As you see it looks like I just moved my html part by showing posts to js. Yes, almost the same, but instead of exact names we have appropriate variables of our post mass.

Did you notice a mistake?

My img is exact, not a variable, so every time I will try to show my posts, they will all have the same image. That's your task - check out how to collect images.

That was my introduction to real communication. Try to assign buttons and lists to be clicked by the user. And hide everything that shouldn't be permanent by making the same functions as printProduct.

More information you can find on my website.

Good luck with your job!

Written by Yuri Filatov, IT Expert at Andersen

JavaScriptHTMLCSSBeginner Developers