File size: 2,005 Bytes
6a7089a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E2E Test - Buttons</title>
<style>
.counter { font-size: 2em; margin: 20px 0; }
button { padding: 10px 20px; margin: 5px; cursor: pointer; }
</style>
</head>
<body>
<h1>Buttons Test</h1>
<section id="counter-section">
<h2>Counter</h2>
<div class="counter">Count: <span id="count">0</span></div>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<button id="reset">Reset</button>
</section>
<section id="toggle-section">
<h2>Toggle</h2>
<button id="toggle-btn">Toggle visibility</button>
<div id="toggle-content" style="display: block;">
<p>This content can be toggled.</p>
</div>
</section>
<section id="alert-section">
<h2>Messages</h2>
<button id="show-message">Show Message</button>
<div id="message" style="display: none; padding: 10px; background: #e0f0e0; margin-top: 10px;">
Message displayed successfully!
</div>
</section>
<script>
let count = 0;
const countEl = document.getElementById('count');
document.getElementById('increment').addEventListener('click', () => {
count++;
countEl.textContent = count;
});
document.getElementById('decrement').addEventListener('click', () => {
count--;
countEl.textContent = count;
});
document.getElementById('reset').addEventListener('click', () => {
count = 0;
countEl.textContent = count;
});
document.getElementById('toggle-btn').addEventListener('click', () => {
const content = document.getElementById('toggle-content');
content.style.display = content.style.display === 'none' ? 'block' : 'none';
});
document.getElementById('show-message').addEventListener('click', () => {
document.getElementById('message').style.display = 'block';
});
</script>
</body>
</html>
|