Global click counter that counts clicks of all users-CodePudding

I am quite green in the CSS, HTML and JS, but I wish to create click counter that counts all the clicks made by all the users.

ie. when the counter says "0" and if person A has opened the site and clicks the counter once the person B by clicking the counter once too gets result of "2" instead of "1".

I have watched many videos how to create the counter but it resets once the page is reloaded and that's not what I want.

<!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">
    <title>Counter App</title>
<!-- ---------------- linked css file ----------------- -->
<link rel="stylesheet" href="counter.css">

</head>
<body>

    <!-- ----------------html formated --------------- -->

<div class="container">
    <main>
        <h1>Counter App</h1>
        <div class="button-counter">
            <button class="btn decreased"> - </button>
            <span> 0 </span>
            <button class="btn increase">   </button>  
        </div>
    </main>
</div>





<!-- ---------------- linked js file ---------------- -->
    <script src="app.js"></script>
    
</body>
</html>


    // initial value of span ========  

let value = 0 

// getting value by reference ==========

const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");


// --------- calling the even function -------------------

decreased.addEventListener("click" , () => {
    span.innerHTML=value--;

});

// --------------- event for increase button--------------------

increase.addEventListener("click" , () =>{
    span.innerHTML=value  ;
})
    

*{
    margin 0%;
    padding: 0%;
    box-sizing: border-box;
    background-color: rgba(255, 166, 0, 0.644);

}
.container
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: orange;
    border: 1px solid orange;
    border-radius: 20px;
    box-shadow: 5px 5px 4px 2px rgb(211, 161, 96);
    width: 300px;
    height: 200px;

}

h1{
    font-size: 30px;
    text-align: center;
    text-shadow: 2px 2px rgba(5, 5, 5, 5);
    color: white;


}

.button-counter{
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
button
{
    text-align: center;
    padding: 10px;
    margin: 10px;
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255, 166, 0, 0.445);
    cursor: pointer;
    box-shadow: 5px 5px 5px rgba(255, 166, 0, 0.829);
    border: 1px solid rgb(231, 230, 230);
    font-weight: bolder;
    color: white;
    

}
button:hover{
    background-color: #fff;
    color: black;

}
span
{
    text-align: center;
    box-shadow: 5px 5px 4px 2px rgb(150, 143, 121);
    font-size: 32px;
    font-weight: bolder;
    
    border-radius: 10px;
    width: 50px;
    border: 1px solid rgb(90, 89, 89);
    color: rgb(36, 17, 33);

}

CodePudding user response：

If you want the next user to count from what the previous left, you need to store the data somewhere (for example on a database) and when the page loads first of all you read that value again and show it to the user.

The answer is no, you cannot do that with only CSS, HTML and JS.

CodePudding user response：

Best option to store public data on the frontend is local storage.
window.localStorage.setItem(name, data); // -> set item window.localStorage.getItem(name); // -> get item

Disadvantages

can be changed using the DevTools

resets if cache is cleared

~~If you don't want that, you must use a database therefore you need a backend~~

EDIT: You need a database and a server to be able to shara data between multiple users and/or clients