Name: Touchpad using the html css js
Rating: 4.5 (6781 reviews)
Author: prince_beec5ccde00b7c6c73
code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Touch Pad</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: black; /* Background color */
        }

        .touchpad {
            display: grid;
            background-color: #443e3e; /* Darker touchpad background */
            padding: 20px;
            border-radius: 20px;
            grid-template-columns: repeat(3, 60px); /* Initial size for the touchpad */
            grid-template-rows: repeat(3, 60px);
            gap: 20px; /* Space between dots */
            transition: all 0.3s; /* Smooth transition for touchpad */
            width: 200px; /* Initial touchpad width */
            height: 200px; /* Initial touchpad height */
        }

        .dot {
            width: 48px; /* Start with visible size */
            height: 48px;
            background-color: #bec4be8c; /* Light color for dots */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: width 0.3s, height 0.3s, background-color 0.3s; /* Smooth transitions */
            cursor: pointer;
            position: relative;
        }

        .touchpad.active {
            width: 250px; /* Enlarge touchpad on click */
            height: 250px;
            gap:32px
        }

        .dot.active {
            width: 80px; /* Enlarge on click */
            height: 80px;
            background-color: #6d766e; /* Darker green on active */
        }

        .icon {
            position: absolute;
            font-size: 36px;
            color: rgb(27, 28, 30); /* Slate color for icons */
            opacity: 0;
            transition: opacity 0.3s, color 0.3s; /* Smooth transitions */
        }

        .dot:hover .icon {
            background-color: #388e3c; /* Green on hover */
        }

        .dot.active .icon {
            opacity: 1; /* Show icon when active */
        }

        .dot:hover {
            background-color: #388e3c; /* Darker green on hover */
        }
    </style>
</head>
<body>

    <div class="touchpad">
        <div class="dot">
            <i class="fas fa-plane icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-stopwatch icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-gamepad icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-volume-up icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-wifi icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-battery-full icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-moon icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-lightbulb icon"></i>
        </div>
        <div class="dot">
            <i class="fas fa-bluetooth icon"></i>
        </div>
    </div>

    <script>
        const touchpad = document.querySelector('.touchpad');
        const dots = document.querySelectorAll('.dot');

        touchpad.addEventListener('click', () => {
            // Toggle active class on touchpad to grow it
            touchpad.classList.toggle('active');

            // Show icons for all dots when touchpad is active
            dots.forEach(dot => {
                dot.classList.toggle('active');
            });
        });
    </script>

</body>
</html>