DEV Community

Cover image for Toggle Switches fun using html css and javascript
Prince
Prince

Posted on

Toggle Switches fun using html css and javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Switches with Logic</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #121212;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        .toggle-container {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        .toggle-label {
            margin-left: 10px;
            font-size: 1.2rem;
            background-color: rgb(64, 109, 94);
            padding: 5px;

        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #555;
            border-radius: 25px;
            transition: 0.4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 2.5px;
            background-color: white;
            border-radius: 50%;
            transition: 0.4s;
        }
        input:checked + .slider {
            background-color: #4caf50;
        }
        input:checked + .slider:before {
            transform: translateX(24px);
        }
        .box{
            height: 250px;
            width: 300px;
            background-color: rgb(8, 72, 51);
            border-radius: 10px;
            padding:5px;
        }
    </style>
</head>
<body>
    <div class="box">

        <div class="toggle-container">
            <label class="switch">
                <input type="checkbox" id="cgpa-toggle">
            <span class="slider"></span>
        </label>
        <span class="toggle-label">9.0+ CGPA</span>
    </div>

    <div class="toggle-container">
        <label class="switch">
            <input type="checkbox" id="attendance-toggle">
            <span class="slider"></span>
        </label>
        <span class="toggle-label">75%+ Attendance</span>
    </div>

    <div class="toggle-container">
        <label class="switch">
            <input type="checkbox" id="fun-toggle">
            <span class="slider"></span>
        </label>
        <span class="toggle-label">Mauj Masti</span>
    </div>

    </div> 
    <script>
        // JavaScript logic to handle the toggle switches
        const cgpaToggle = document.getElementById('cgpa-toggle');
        const attendanceToggle = document.getElementById('attendance-toggle');
        const funToggle = document.getElementById('fun-toggle');

        // Add event listener to 'Mauj Masti' toggle
        funToggle.addEventListener('change', () => {
            if (funToggle.checked) {
                attendanceToggle.checked = false;
            }
        });

        // Optional: You can add similar logic for '75%+ Attendance' to turn off 'Mauj Masti'
        attendanceToggle.addEventListener('change', () => {
            if (attendanceToggle.checked && funToggle.checked) {
                funToggle.checked = false;
            }
        });
    </script>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)