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
CountAPI
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>
HTML
<div
id="visits">...</div>
The callAPI fuction is called everytime the page is loaded using the onload event.
The div id="visits" refreshes and is displayed as
Visitor counton the webpage everytime it is loaded.
callAPI
callAPI- Function to make API calls to AWSLambda( KomlalebuFunction).
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')
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>
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.
<form>
<button type="button" style="color: #555555"
onclick="callAPI(document.
getElementById('visits').
innerText,'YES');changeImage1()">
Like</button>
</form>
HTML for dislike button.
<form>
<button type="button" style="color: #555555"
onclick="callAPI(document.
getElementById('visits').
innerText,'NO');changeImage1()">
Like</button>
</form>
Top comments (0)