(Slider siwtch) In one of the Very frist BOLTIOT project of controlling Led and Buzzer via Internet!

we create an html page with two on and off buttons!
instead is there a beautiful way to control it which can be more efficient?

Thank You!

Yes! There is I used JavaScript to make a function on the HTML slider! used CSS to make it look beautiful, in javaScript for check box! , we can use checkBox.checked == ‘true’, checkBox.checked returns a boolean value on the basis of the staus of the check box!

Adding my page below!


The Javascript Function

    var swit = document.querySelector('#swit'),
        counter = 0;

    swit.addEventListener('click', chk);

    function chk() {
        if (swit.checked == true) {
            digitalWrite(0, 'HIGH');
            console.log('Led Turned ON!');
        } else {
            digitalWrite(0, 'LOW');
            console.log('Led Turned OFF!');

This code below will help you to control LED and buzzer with one ON/OFF button.