JavaScript Interactivity Tutorial

Example 1: Toggle Switch

Create a toggle switch to change background color.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Toggle Switch</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    transition: background 0.3s;
                                }

                                .toggle {
                                    width: 60px;
                                    height: 30px;
                                    background: #ff6f61;
                                    border-radius: 15px;
                                    position: relative;
                                    cursor: pointer;
                                }

                                    .toggle::before {
                                        content: '';
                                        width: 26px;
                                        height: 26px;
                                        background: #ffffff;
                                        border-radius: 50%;
                                        position: absolute;
                                        top: 2px;
                                        left: 2px;
                                        transition: transform 0.3s;
                                    }

                                    .toggle.on::before {
                                        transform: translateX(30px);
                                    }
</style>
</head>
<body>
                            <div class="toggle" onclick="toggleBackground()"></div>
                            <script>
                                function toggleBackground() {
                                    const body = document.body;
                                    const toggle = document.querySelector('.toggle');
                                    toggle.classList.toggle('on');
                                    body.style.background = toggle.classList.contains('on') ? '#1e90ff' : '#121212';
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click the toggle to change colors. Clear in small outputs.

Example 2: Simple Counter

Create a counter with increment and decrement functionality.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Simple Counter</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    color: #ffffff;
                                }

                                .counter {
                                    display: flex;
                                    gap: 10px;
                                    align-items: center;
                                }

                                    .counter span {
                                        font-size: 2em;
                                    }

                                    .counter button {
                                        padding: 10px;
                                        background: #ff6f61;
                                        color: #ffffff;
                                        border: none;
                                        border-radius: 8px;
                                        cursor: pointer;
                                    }
</style>
</head>
<body>
                            <div class="counter">
                            <button onclick="decrement()">-</button>
                            <span id="count">0</span>
                            <button onclick="increment()">+</button>
    </div>
                            <script>
                                let count = 0;
                                const countDisplay = document.getElementById('count');
                                function increment() {
                                    count++;
                                    countDisplay.textContent = count;
                                }
                                function decrement() {
                                    count--;
                                    countDisplay.textContent = count;
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click buttons to change the count. Simple and clear in small outputs.

Example 3: Image Toggle

Toggle an image’s visibility with JavaScript.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Image Toggle</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    flex-direction: column;
                                    gap: 20px;
                                    color: #ffffff;
                                }

                                .image {
                                    width: 150px;
                                    height: 150px;
                                    background: #ff6f61;
                                    border-radius: 8px;
                                    display: none;
                                }

                                    .image.visible {
                                        display: block;
                                    }

                                button {
                                    padding: 10px 20px;
                                    background: #1e90ff;
                                    color: #ffffff;
                                    border: none;
                                    border-radius: 8px;
                                    cursor: pointer;
                                }
</style>
</head>
<body>
                            <button onclick="toggleImage()">Toggle Image</button>
                            <div class="image"></div>
                            <script>
                                function toggleImage() {
                                    document.querySelector('.image').classList.toggle('visible');
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click to show/hide the image. Clear in small outputs.

Example 4: Text Color Changer

Change text color randomly on click.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Text Color Changer</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    color: #ffffff;
                                }

                                .text {
                                    font-size: 2em;
                                    cursor: pointer;
                                }
</style>
</head>
<body>
                            <h1 class="text" onclick="changeColor()">Click Me</h1>
                            <script>
                                function changeColor() {
                                    const colors = ['#ff6f61', '#1e90ff', '#ffd700'];
                                    const text = document.querySelector('.text');
                                    text.style.color = colors[Math.floor(Math.random() * colors.length)];
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click text to change its color. Simple and clear in small outputs.

Example 5: Modal Popup

Show/hide a modal popup with JavaScript.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Modal Popup</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    color: #ffffff;
                                }

                                .modal {
                                    display: none;
                                    background: #1e1e1e;
                                    padding: 20px;
                                    border-radius: 8px;
                                    width: 200px;
                                    text-align: center;
                                    position: absolute;
                                }

                                    .modal.active {
                                        display: block;
                                    }

                                button {
                                    padding: 10px 20px;
                                    background: #ff6f61;
                                    color: #ffffff;
                                    border: none;
                                    border-radius: 8px;
                                    cursor: pointer;
                                }
</style>
</head>
<body>
                            <button onclick="toggleModal()">Show Modal</button>
                            <div class="modal">
                            <p>Modal Content</p>
                            <button onclick="toggleModal()">Close</button>
    </div>
                            <script>
                                function toggleModal() {
                                    document.querySelector('.modal').classList.toggle('active');
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click to show/hide the modal. Fits well in small outputs.

Example 6: Expandable Card

Toggle a card’s size with JavaScript.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=1024">
                            <title>Expandable Card</title>
                            <style>
                                body {
                                    margin: 0;
                                    font-family: 'Poppins', sans-serif;
                                    background: #121212;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100vh;
                                    color: #ffffff;
                                }

                                .card {
                                    background: #1e1e1e;
                                    padding: 20px;
                                    border-radius: 8px;
                                    width: 150px;
                                    text-align: center;
                                    transition: width 0.3s;
                                }

                                    .card.expanded {
                                        width: 250px;
                                    }

                                button {
                                    margin-top: 10px;
                                    padding: 10px;
                                    background: #ff6f61;
                                    color: #ffffff;
                                    border: none;
                                    border-radius: 8px;
                                    cursor: pointer;
                                }
</style>
</head>
<body>
                            <div class="card">
                            <p>Card Content</p>
                            <button onclick="toggleCard()">Toggle Size</button>
    </div>
                            <script>
                                function toggleCard() {
                                    document.querySelector('.card').classList.toggle('expanded');
                                }
</script>
</body>
</html>

Download Code

Live Output

Note: Click to expand/shrink the card. Clear in small outputs.

JavaScript Interactivity Tutorial

Master JavaScript Interactivity

Why Learn JavaScript Interactivity?

Best Practices

Example 1: Toggle Switch

Example 2: Simple Counter

Example 3: Image Toggle

Example 4: Text Color Changer

Example 5: Modal Popup

Example 6: Expandable Card

Next Steps