The Digital Mike

Hola, alguna vez han pensado en contar la cantidad de click que hacen en un link o botón en su sitio? Pues aquí les traigo un contador de clicks fácil con solo HTML, CSS y JavaScript.

Este código pueden utilizarlo en cualquier vinculo que tengan y así saber cuantas personas interactuan con tu contenido.

Lo primero parar hacer este contador de clicks con HTML, CSS y JavaScript, es crear el contenido HTML

En el HTML, vamos a crea, para este tutorial algo un poquito personalizado, para crear una mejor presentación del código. Teniendo esto en cuenta, vamos a crear un titulo, dos botones, uno para contar y otro para reiniciar el contador, y un párrafo para presentar el contador. Aquí les dejo el HTML.

<section id="sect">
        <div class="midl">
            <div>
                <h1>Contador de click sobre un boton</h1>
            </div>
            <button id="btnClick">Cuenta</button>
            <button id="btnClear">Reset</button>
            <p id="contarClick"></p>
        </div>
    </section>

Los «id» estan para controlar el contenido.

Debido a que quiero darle un poco de vida al codigo, les explico los ids:

1. sect: nos va a permitir acceder al bloque completo porque me atrae la idea de que cada conteo me cambie el color de fondo del bloque entero.
2. btnClcik: nos permite acceder al boton de contar para agregarle una accion de click y asi cambiar el conteo y el color del fondo.
3. btnClear: nos da acceso para limpiar el fondo, devolverlo a blanco, y reiniciar el contador.
4. contarClick: Es donde vamos a previsualizar el conteo.

Sin mas, vamos a darle estilo a todo el contenido.

Para el estilo, crearemos algo bien básico. texto y botones centrados, asi como buena cantidad de espacio arriba y abajo del contenido para presentar el color de fondo.

<style>
        h1{text-align: center;font-size: 45px;text-shadow: 0 1px white;}
        section{
            text-align: center;
            margin: auto;
            padding: 350px 0;
            transition: all .5s;
        }
        button{
            border: none;
            background-color: tomato;
            padding: 15px;
            border-radius: 5px;
            font-size: 18px;
            font-weight: 800;
            color: white;
            cursor: pointer;
        }
        button:hover{
            background-color: brown;
        }
        #contarClick{
            font-size: 85px;
            font-weight: 800;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin: 20px auto;
            background-color: aliceblue;
            width: fit-content;
            padding: 15px 40px;
            border-radius: 50%;
        }
    </style>

Y con esto tenemos este resultado

Ahora pasaremos a la parte funcional del código.

En el código funcional, vamos a llamar a todos los «ids», vamos a crear una función para generar colores aleatorios, y vamos agregar las funciones a los eventos de click a los botones para que todo funcione.

<script type="text/javascript">
        
        var btnElm = document.getElementById('btnClick'),
            btnClear = document.getElementById('btnClear'),
            pElm = document.getElementById('contarClick')
            sect = document.getElementById('sect'),
            contar = 0;
        
        const sbg = function(){
            const randColor = Math.floor(Math.random() * 16777215).toString(16);
            sect.style.backgroundColor = "#" + randColor;
        }
        
        pElm.textContent = 0;
        
        btnElm.onclick = function(){
            contar++;
            pElm.textContent = contar;
            sbg();
        }
        
        btnClear.onclick = function(){
            pElm.textContent = 0;
            contar = 0;
            sect.style.backgroundColor = "white";
        }
    </script>

Y con esto ya tenemos un simple contador de clicks que puedes utilizar entus paginas. Aque mola esto.