Build a on/off switch button using HTML CSS and JavaScript

In this web development project we are goin to create a animated on off switch button using just HTML CSS and JavaScript and also add a delayed stand by effect using setTimeout function and clearTimeout in order to remove this functionality.

Donation!

Project overview

• Build a on/off switch button
  • Project setup
  • Create HTML CSS JS files
  • create HTML5 boiler plate
  • Link up CSS and JS
  • Create and style the switch buttons using HTML and CSS
  • Get elements from the DOM using js getElementById and querySelector
  • Add event listeners of click event to the buttons
  • Create addRemoveActive utility function
  • Remove standby status of the switch container using setTimeout()
  • Create timeout function for standby of the switch container

Useful Links:

• Font Awesome
• font-awesome CDN
• Bootstrap

Project setup

HTML

 <h1>On/Off Switch</h1>
    <div class="switch-container standby">
      <button id="Off">OFF</button>
      <button id="On">ON</button>
    </div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #2d2d2d;
  color: #fff;
}

body h1 {
  text-align: center;
  margin: 5rem auto;
}

.switch-container {
  position: relative;
  display: flex;
  width: 260px;
  height: 100px;
  background-color: linear-gradient;
  margin: auto;
  border-radius: 50px;
  background: #0e0e0e;
  border: 1px solid #222;
  box-shadow: 0 0 5px 1px #333;
}

.switch-container.standby {
  border: 1px solid #2196f3;
  box-shadow: 0 0 6px 1px #2196f3;
}

.switch-container button {
  cursor: pointer;
  transition: 0.3s ease;
  font-size: 1.1rem;
  width: 100%;
  border-radius: 50px;
  margin: 0.8rem;
  background: #151515;
  color: gray;
}

.switch-container button#Off.active {
  background: linear-gradient(90deg, #4f4f4f 30%, #2e2e2e 66%, #151515 100%);
  color: #b8021d;
}

.switch-container button#On.active {
  background: linear-gradient(90deg, #4f4f4f 30%, #2e2e2e 66%, #151515 100%);
  color: #4c8137;
}
/*# sourceMappingURL=main.css.map */

Menu JS

const OffBtn = document.getElementById("Off");
const OnBtn = document.getElementById("On");
const switchContainer = document.querySelector(".switch-container");
// Switch On

OnBtn.onclick = () => {
  // OffBtn.classList.remove("active");
  // OnBtn.classList.add("active");
 
  addRemoveActive(OffBtn, OnBtn);
  removeStandby();
};
// Switch Off
OffBtn.onclick = () => {
  if (OnBtn.classList.contains("active")) {
    addRemoveActive(OnBtn, OffBtn);
    removeStandby();
  } else {
    return;
  }
};

// todo: Remove standby from the switch container

function removeStandby() {
  switchContainer.classList.remove("standby");
  if (OffBtn.classList.contains("active")) {
    startStandby();
  } else {
    switchContainer.classList.remove("standby");
    clearTimeout(standby);
  }
}
// todo: create timeout for standby

let standby;

function startStandby() {
  standby = setTimeout(() => {
    switchContainer.classList.add("standby");
    OffBtn.classList.remove("active");
  }, 5000);
}
// todo: addRemoveActive utility function
function addRemoveActive(remove, add) {
  remove.classList.remove("active");
  add.classList.add("active");
}

Show and hide the widgets tab

Become a web developer!

Learn HTML CSS & Sass JavaScript Bootstrap and more...