JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="scraper_controls">

  <div class="switch is-off">
    <div class="switch__handle_slider">
    <div class="switch__handle"></div>
    </div>
  </div>
  
  <div class="scraping_status">
    <span class="scraping_status__label">Scraping</span> <span class="scraping_status__value">Off</span>
  </div>

</div>

CSS

.scraper_controls {
  position: fixed;
  bottom: 2em;
  right: 2em;
  display: flex;
  align-items: center;
  background-color: #444;
  color: #fff;
  padding: .5em .6em;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,.3);
  width: 10em;
  font-family: helvetica;
  font-weight: 600;
}

.switch {
  --transition: .2s;
  --handle-width: 40%;
  border-radius: 5px;
  background-color: #eee;
  width: 3em;
  padding: .2em;
  box-sizing: border-box;
  transition: var(--transition);
  overflow: hidden;
  margin-right: .6em;
  cursor: pointer;
}

.switch__handle {
  height: 1em;
  width: var(--handle-width);
  border-radius: 4px;
  background-color: #fff;
  transition: var(--transition);
}

.switch__handle_slider {
  transition: var(--transition);
}

.switch.is-off {
  background-color: #de3333;
}

.switch.is-off .switch__handle {

}

.switch.is-on {
  background-color: #3db03d;
}

.switch.is-on .switch__handle_slider {
  /*
  --translateX: calc(100% - var(--handle-width) );
	transform: translateX( --var(translateX) );
  */
  transform: translateX( 60% );
}

JavaScript

const d = document;

const $switch = d.querySelector('.switch');
const $scraping_status__value = d.querySelector('.scraping_status__value');

let isScraping = false;

function turnOnScraping() {
  	$switch.classList.remove('is-off');
	  $switch.classList.add('is-on');
    $scraping_status__value.innerText = 'On';
    isScraping = true;
}

function turnOffScraping() {
  	$switch.classList.remove('is-on');
	  $switch.classList.add('is-off');
    $scraping_status__value.innerText = 'Off';
    isScraping = false;
}

$switch.addEventListener('click', () => {
	if ( isScraping ) {
		turnOffScraping();
    
  } else {
		turnOnScraping();
  }
})