7. Javascript
Tags: aws, javascript
Published: 2021-01-02 22:59:13

There is a visit counter on the left section of my [website](https://www.komlalebu.com) using `CountAPI`. To implement this I needed to write a bit of `JavaScript`. There is also a bit of scripting to push the feedback data (like/dislike) of visitors to my JS function `callAPI` because every eyeball counts.

Git: https://github.com/jicoing/git-komlalebu

![Alt text](https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fi0.kym-cdn.com%2Fphotos%2Fimages%2Foriginal%2F000%2F692%2F504%2F3ec.gif&f=1&nofb=1)

#[CountAPI](https://countapi.xyz)
[index.html](https://github.com/jicoing/git-komlalebu/blob/master/index.html)

>JS - [CountAPI](https://countapi.xyz)
This API allows you to create simple numeric counters.

                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                      <script> 
                      function cb(response) {
	              document.getElementById('visits').innerText 
                      = response.value; 
	              }
	               </script>

                      <script async 
       
                      src="https://api.countapi.xyz/hit/
                      blog.komlalebu.com/visits?callback=cb"> 
                      </script>
                      </head> 

>HTML  

                     <div 
                     id="visits">...</div>


* The callAPI fuction is called everytime the page is loaded using the [onload](https://www.w3schools.com/jsref/event_onload.asp) event.

* The [div id](https://pediaa.com/what-is-the-difference-between-div-id-and-div-class/)="visits" refreshes and is displayed as `Visitor count` on the webpage everytime it is loaded.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ny01jg33qqjhg97szrp5.PNG)

# callAPI
>`callAPI` - Function to make API calls to AWS `Lambda`( [KomlalebuFunction](https://dev.to/jicoing/10-python-2m0o)).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wm9f8adjs6uwobsu5ngj.PNG)

The function has two parameters `visitorCount` and `visitorResponse`. 
`visitorCount` - It is a JSON object retrieved from the `countAPI JS` having div element id `visits`. This is the count value fetched.

`visitorResponse` - It is a ('YES' or 'NO')string value passed [onclicking](https://www.w3schools.com/jsref/event_onclick.asp) the  like or dislike buttons (declared in button tag), which calls the API.

                             >Like:                                             
        callAPI(document.getElementById('visits').innerText,'YES')

                             >Dislike:                                             
        callAPI(document.getElementById('visits').innerText,'NO')

This is usually empty string '' when the callAPI function is called during the [onload](https://www.w3schools.com/jsref/event_onload.asp) event declared in the HTML body tag, which calls the API.


                     <body onscroll="changeImage3()" onload = 
                     "callAPI(document.getElementById('visits')
                     .innerText,'')">

                     </body>

var `raw` - holds the JSON value parsed as a string for the method body.

`fetch(URL,requestOptions)` - the function invokes ([aws-sam-komlalebu](https://dev.to/jicoing/9-api-1ad9)) API URL with the request options declared. (method type as `POST`, header as `myHeaders`, body as `raw`).


#[Button](https://www.w3schools.com/tags/tag_button.asp)
There is also a HTML button tag for the user to provide feedback and make a call to the callAPI function using [onclick](https://www.w3schools.com/jsref/event_onclick.asp) event.

>HTML for like button.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c6pzip1te1mcm7splp9c.PNG)
           
                      <form>
                      <button type="button" style="color: #555555" 
                      onclick="callAPI(document.
                      getElementById('visits').
                      innerText,'YES');changeImage1()">
                      Like</button>
                      </form>

>HTML for dislike button.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jgodiqx6ckik5665r7j.PNG)
           
                      <form>
                      <button type="button" style="color: #555555" 
                      onclick="callAPI(document.
                      getElementById('visits').
                      innerText,'NO');changeImage1()">
                      Like</button>
                      </form>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)