How to count likes, likes, dislikes etc. by using CSS, HTML and JavaScript?
I have come up with a tutorial that can count likes, profits, sorrows etc. by clicking through the use of CSS, HTML and JavaScript.
Who actually thinks how Facebook likes count? If your question is like this then let me know in the comment box. Today we have written this tutorial for newbies. Today we will use local memory or storage to write something like, love, great, bad, sad button will add 1 in each case. In fact, it is the beginning of learning so we are learning.
And I will now give you the source code as a gift. You can learn more by customizing the source code.
🍃
1. Create the HTML part
<button onclick="clickCounter4()" type="button">Sad <div id="result4"></div> </button>
Here is a button and a function and an ID for the result.
It is possible to create many more buttons by copying it.
2. Create css
<style>
button {
background-color: white;
color: blue;
font-weight:800;
border: 1px solid blue;
padding: 5px;
height: 50px;
width: 60px;
margin: 0 2px;
border-radius: 5px;
cursor: pointer;
text-transform: uppercase;
}
button:hover {
background-color: #ccc4fd;
text-transform: lowercase;
}
</style>
Button styles and hover effects are taken. Here you can fill more beauty according to your wish.
3. Generate Java Script.
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "" + localStorage.clickcount + "";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
Here is a function taken.
Many more same functions can be created by copying it.
For example:
1. function clickCounter()
2. function clickCounter2()
3. function clickCounter3()
4. function clickCounter4()
etc.
And if you are new -
You can change where the clickcount is. 1, 2, 3 etc.
Result:
Last words:
If you can complete the task correctly. Then using this source code you can easily create any click button and count the clicks. There will be no problem.
Special Note:
There is no error in the source code because it has been tested and you are seeing the above result.
My Talk:
Thank you for reading this blog. Assalamu Alaikum! I am Sheikh Zubayer. I want to say something. In fact I have written this article or content or blog by taking a lot of pains, thinking, gaining knowledge about every topic and spending a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. However, if there is any problem, let me know in the comment box. I will try to answer your question properly. Hope it will be useful. I didn't write anything like hope in vain I believe it.
🍃
My Talk:
Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!
0 Comments