WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Global Mouse Click Counter</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="counter-container"> <h1>Mouse Click Counter</h1> <div id="count">0</div> <p>Click anywhere on the page to increase the count!</p> <button id="resetBtn">Reset</button> </div> <script src="script.js"></script> </body> </html>
body { background: #f2f8fd; font-family: Arial, sans-serif; display: flex; height: 100vh; align-items: center; justify-content: center; margin: 0; } .counter-container { background: #fff; padding: 2em 3em; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); text-align: center; } #count { font-size: 3em; margin: 1em 0; color: #1e90ff; } #resetBtn { padding: 0.5em 1.2em; border: none; background: #1e90ff; color: #fff; border-radius: 8px; font-size: 1em; cursor: pointer; } #resetBtn:hover { background: #1666a2; }
let count = 0; const countDisplay = document.getElementById('count'); const resetBtn = document.getElementById('resetBtn'); document.addEventListener('click', function(event) { // Prevent the counter from increasing when clicking the reset button if (event.target === resetBtn) return; count++; countDisplay.textContent = count; }); resetBtn.addEventListener('click', function(event) { count = 0; countDisplay.textContent = count; });
Preview
Open Advanced Editor
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Global Mouse Click Counter</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="counter-container"> <h1>Mouse Click Counter</h1> <div id="count">0</div> <p>Click anywhere on the page to increase the count!</p> <button id="resetBtn">Reset</button> </div> <script src="script.js"></script> </body> </html>
body { background: #f2f8fd; font-family: Arial, sans-serif; display: flex; height: 100vh; align-items: center; justify-content: center; margin: 0; } .counter-container { background: #fff; padding: 2em 3em; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); text-align: center; } #count { font-size: 3em; margin: 1em 0; color: #1e90ff; } #resetBtn { padding: 0.5em 1.2em; border: none; background: #1e90ff; color: #fff; border-radius: 8px; font-size: 1em; cursor: pointer; } #resetBtn:hover { background: #1666a2; }
let count = 0; const countDisplay = document.getElementById('count'); const resetBtn = document.getElementById('resetBtn'); document.addEventListener('click', function(event) { // Prevent the counter from increasing when clicking the reset button if (event.target === resetBtn) return; count++; countDisplay.textContent = count; }); resetBtn.addEventListener('click', function(event) { count = 0; countDisplay.textContent = count; });
Preview
Validating your code, please wait...