JSFiddle - React, Tailwind, and code Playground

by DieuTopGun

HTML

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bS1OuyKWTFCqa-73MCZmyIPyh0u0jfpQzg&usqp=CAU" onClick="compteClic()"/>

<div style="text-align:center" >
Vous avez cliqué <input type="text" id="texte1" style="background-color:#FFFFFF; border:#FFFFFF none 0px; text-align:center" value="0" size="3" readonly="true"> fois.</div>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bS1OuyKWTFCqa-73MCZmyIPyh0u0jfpQzg&usqp=CAU" onClick="compteClic()"/>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bS1OuyKWTFCqa-73MCZmyIPyh0u0jfpQzg&usqp=CAU" onClick="compteClic()"/>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bS1OuyKWTFCqa-73MCZmyIPyh0u0jfpQzg&usqp=CAU" onClick="compteClic()"/>

CSS

#counter{
    
    font-size:20px;
    font-family:verdana;
    background:red;
    width:150px;
    height:150px;
    line-height:100px;
    text-align:center;
    border-radius:50%;
    box-shadow:0 0 20px black inset;
    border:none;
    transition:0.2s;
}

#counter:active{
    
    background:darkred;
    box-shadow:0 0 40px black inset;
    
}

JavaScript

var nbClic=0; //création de la variable : nom et valeur initiale
function compteClic() {
nbClic++; //incrémentation de nbClic de 1
document.getElementById('texte1').value=nbClic;
}