I am new to CSS, HTML, and JS, but I have a unique idea for a click counter that counts the total clicks made by all users.
For example, if the counter is at "0" and person A clicks once, then person B also clicks once, the result should show as "2" instead of "1".
I have researched how to create the counter, but most solutions I found reset the count when the page is reloaded, which is 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>Click Counter App</title>
<!-- ---------------- linked css file ----------------- -->
<link rel="stylesheet" href="click-counter.css">
</head>
<body>
<!-- ----------------html formated --------------- -->
<div class="container">
<main>
<h1>Click 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="click-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);
}