CODEWITHSUNDEEP
javascripthtmlcssbutton
Flashsloth
Flashsloth

Reputation: 35

How can I count the amount of times a button has been clicked on a website?

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>

Upvotes: 1

Views: 2675

Answers (3)

Dharmik
Dharmik

Reputation: 39

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>

Upvotes: 1

Bob joe12
Bob joe12

Reputation: 125

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.

Upvotes: 2

Coder who is 12 years old.
Coder who is 12 years old.

Reputation: 26

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>

Upvotes: 1

Related Questions