I dont know anything about javascript but I just have to make this work, how can i count the number of times people have clicked a button? The code for it is below. I want to count the amount of times EVERYONE has clicked the button, like if i clicked the button from another PC.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
body{
background-color: #2e2e2e;
}
.mainBtn{
padding: 10px 20px;
border-radius: 6px;
border-width: 2px;
border-color: #2b2b2b;
border-style: solid;
font-size: 45px;
color: white;
font-family: 'Roboto', sans-serif;
background-color: #2b2b2b;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -60%);
transition: 0.3s;
}
.mainBtn:hover{
transition: 0.3s;
background-color: #383838;
border-radius: 6px;
border-width: 2px;
border-color: #383838;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device -width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Don't Do It. DT</title>
</head>
<body>
<button class="mainBtn">Button</button>
</body>
</html>You can count the times each user clicks with localstorage (it is saved to their browser only) (Read here: https://www.w3schools.com/jsref/prop_win_localstorage.asp)
But if you were to track from all users, you would need a database for that. For web apps, I would recommend firebase.
Click on Run Code Snippet For Demo
Check The Code Below code
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
body {
background-color: #2e2e2e;
}
.mainBtn {
padding: 10px 20px;
border-radius: 6px;
border-width: 2px;
border-color: #2b2b2b;
border-style: solid;
font-size: 45px;
color: white;
font-family: "Roboto", sans-serif;
background-color: #2b2b2b;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -60%);
transition: 0.3s;
}
.mainBtn:hover {
transition: 0.3s;
background-color: #383838;
border-radius: 6px;
border-width: 2px;
border-color: #383838;
}
p {
color: aqua;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device -width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Don't Do It. DT</title>
</head>
<body>
<button onclick="myFunction()" class="mainBtn">Button</button>
<p>You Have Clicked Button</p>
<p id="demo"></p>
<script>
let count = 0;
function myFunction() {
count++;
document.getElementById("demo").innerHTML = count;
}
</script>
</body>
</html>You should write a javascript because that will make your button think nad count how many times a button is pressed. Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device -width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Example</title>
</head>
<body>
<button onclick="myFunction()" class="mainBtn">Button</button>
<p>The button has been clicked</p>
<p id="demo"></p>
<script>
let count = 0;
function myFunction() {
count++;
document.getElementById("demo").innerHTML = count;
}
</script>
</body>
</html>