water tank auto

by Jithin Raj P R

HTML

<div class="switchWrap">
  <span class="switchWrap_text">Water pump status</span>
  <label class="rocker rocker-small">
    <input type="checkbox">
    <span class="switch-left">ON</span>
    <span class="switch-right">OFF</span>
  </label>

</div>

<div class="tank tank_bottom"  tank-underground>
    <div class="tank_bottom-inpipe"></div>
    <div class="tank_bottom-outpipe"></div>
    <div class="water" style="height: 30%;"></div>
</div>

<div class="tank" tank-top>
    <div class="tank_sensor">
        <div class="tank_sensor-line"></div>
        <div class="tank_sensor-weight"></div>
        <div class="tank_sensor-float" style="top:calc(30% - 10px);"></div>
        <div class="tank_sensor-weight tank_sensor-weightBottom"></div>
    </div>
    <div class="water" style="height: 70%;"></div>
</div>

<div class="labels">
  <div class="forFunctions">
    <div class="waterOutlest">
      <div class="text">Water from Outlet</div>
      <div class="wrap">
        <input type="checkbox" water-outlet />
        <div class="outer">
        </div>
        <div class="inner">
        </div>
      </div>
    </div>
    <div class="waterOutlest">
      <div class="text">Use water from house</div>
      <div class="wrap">
        <input type="checkbox"  house-use />
        <div class="outer">
        </div>
        <div class="inner">
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

html {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  font-size: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin:0;
  padding:0;
}


/* Switch starts here */
.switchWrap{
  display:flex;
  flex-direction:column;
  &_text{
    padding-top:10px;
  }
}

.rocker {
  display: inline-block;
  position: relative;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #888;
  width: 7em;
  height: 4em;
  overflow: hidden;
  border-bottom: 0.5em solid #eee;
  
  &-small {
    font-size: 0.75em; /* Sizes the switch */
    margin: 1em;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    border: 0.5em solid #eee;
    border-bottom: 0;
  }

  & input {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

.switch{
  &-left,
  &-right {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5em;
    width: 3em;
    transition: 0.2s;
    
    &::before {
      content: "";
      position: absolute;
      width: 0.4em;
      height: 2.45em;
      bottom: -0.45em;
      background-color: #ccc;
      transform: skewY(-65deg);
    }
  }
  
  &-left {
    height: 2.4em;
    width: 2.75em;
    left: 0.85em;
    bottom: 0.4em;
    background-color: #ddd;
    transform: rotate(15deg) skewX(15deg);
    
    &::before {
      left: -0.4em;
    }
  }

  &-right {
    right: 0.5em;
    bottom: 0;
    background-color: #bd5757;
    color: #fff;
    
    &::before {
      right: -0.375em;
      background-color: transparent;
      transform: skewY(65deg);
    }
  }
}

.rocker {
  input:checked{
    & + .switch-left {
      background-color: #0084d0;
      color: #fff;
      bottom: 0px;
      left: 0.5em;
      height: 2.5em;
      width: 3em;
      transform: rotate(0deg) skewX(0deg);

      &::before {
        background-color: transparent;
    ...

JavaScript

const tabs = {
    init(){
        const [waterStore,waterUse,tankTop] = ['[water-outlet]','[house-use]','[tank-top]'];
        waterUse.length && this.waterTank(waterStore,waterUse,tankTop);
    },
    
    
    waterTank(waterStore,waterUse,tankTop){
    	const waterToUse = Number.parseInt(document.querySelector(`${tankTop} .water`).style.height);
      
    	const waterFill = function(trigger= 'on'){
						const myInterval = setInterval(myTimer, 1000);

function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

function myStop() {
  clearInterval(myInterval);
}
      }
    
    	const houseTank = function(event,todo){
      	if (event.currentTarget.checked) {
        	waterFill();
        } else {
        	waterFill('stop');
        }
      }
      
      document.querySelector(waterUse).addEventListener('change', (event) => houseTank(event,'empty'));
      document.querySelector(waterStore).addEventListener('change',(event) =>  houseTank(event,'fill'));
    }
};

tabs.init();