DEV Community

Cover image for 7. Javascript
jicoing
jicoing

Posted on • Edited on

7. Javascript

#javascript #aws

There is a visit counter on the left section of my website 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

CountAPI

index.html

JS - CountAPI
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>
Enter fullscreen mode Exit fullscreen mode

HTML 

                 <div 
                 id="visits">...</div>
Enter fullscreen mode Exit fullscreen mode

  • The callAPI fuction is called everytime the page is loaded using the onload event.

  • The div id="visits" refreshes and is displayed as Visitor count on the webpage everytime it is loaded.

Alt Text

callAPI

callAPI - Function to make API calls to AWS Lambda( KomlalebuFunction).

Alt Text

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 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')
Enter fullscreen mode Exit fullscreen mode

This is usually empty string '' when the callAPI function is called during the onload event declared in the HTML body tag, which calls the API.

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

                 </body>
Enter fullscreen mode Exit fullscreen mode

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

fetch(URL,requestOptions) - the function invokes (aws-sam-komlalebu) API URL with the request options declared. (method type as POST, header as myHeaders, body as raw).

Button

There is also a HTML button tag for the user to provide feedback and make a call to the callAPI function using onclick event.

HTML for like button.
Alt Text

                  <form>
                  <button type="button" style="color: #555555" 
                  onclick="callAPI(document.
                  getElementById('visits').
                  innerText,'YES');changeImage1()">
                  Like</button>
                  </form>
Enter fullscreen mode Exit fullscreen mode

HTML for dislike button.
Alt Text

                  <form>
                  <button type="button" style="color: #555555" 
                  onclick="callAPI(document.
                  getElementById('visits').
                  innerText,'NO');changeImage1()">
                  Like</button>
                  </form>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Top comments (0)