Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to create a view/hit counter (In HTML CSS AND JS).
QuickV (130)

Title mostly explains what we're doing, so let's get started!

Step 1: Getting started

Go to CountAPI

Step 2: The part where you actually get started.

Do Control + F (or Command + F), and type in the command "/create"

Step 3: Creating

You should now see the letters /create on your screen (highlighted). Underneath that it should say "Creates a key. All parameters are optional". If you can see that, your're in the correct spot.

Step 4: Opening The Link

Scroll down a little bit (basically a very small amount), and you'll see a link that says (https://api.countapi.xyz/create?namespace=mysite.com&value=42)... Open that link (in a new tab).

Step 5: Udjusting

Change "mysite.com" to whatever you want (I recommend the name of the replit project you're adding this to), and after changing that, type "&", and then type something else (I recommend your username). Then just change the value at the end to 0.

Sorry if this part was confusing, but the link should now be like this: (https://api.countapi.xyz/create?namespace=replitprojectname&yourusername&value=0).

Remember to click enter after finishing the link.

Step 6: Getting

Update the link to: (https://api.countapi.xyz/get/replitprojectname/yourusername), and click enter.

Step 7: Updating

Now you must update that link by 1 every time someone refreshes that page. To do that, just change the link to:

(https://api.countapi.xyz/update/replitprojectname/yourusername/?amount=1)

And then click enter. You should now see the number go up every time you refresh the page.

Step 8: JavaScript

Go to your replit project, and add the following JavaScript:

const countElement = document.getElementById("views");
update();
function update() {
	fetch("https://api.countapi.xyz/update/replitprojectname/username/?amount=1").then(res => res.json()).then(res => {
		countElement.innerHTML = res.value;
	})
}

Remember to replace the link with your own.

Step 9: HTML

Now for the HTML... Make an h1, h2, h3, h4, h5, h6, or span tag with the id of "views"... Then put 0 inbetween the tags. It shoud look something like this:

<span id="views">0</span

And that should work!

Step 10: Styling

I can't really explain this part, because you must style it however you want! For my Calculator project, I just made it be shown in the footer :).

Secret Step: The End

Welp, that's the end of the tutorial! If you have any problems, just explain them in the comments, I'll try to reply ASAP.

Hopefully you all enjoyed this short tutorial

Even though it turns out it isn't that easy to even make a short tutorial lol.