Xmas Lights

HTML, CSS, JavaScript

by j91157j91157

HTML

<div id='light0'></div>
<div id='light1'></div>
<div id='light2'></div>
<div id='light3'></div>
<div id='light4'></div>
<div id='light5'></div>
<div id='light6'></div>
<div id='light7'></div>
<div id='light8'></div>
<div id='light9'></div>
<div id='light10'></div>
<div id='light11'></div>
<div id='light12'></div>
<div id='light13'></div>
<div id='light14'></div>
<img src="https://i.imgur.com/wOkxldK.png">
<button id="power">Power</button>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

body {
  background: -webkit-linear-gradient(top, rgba(235, 241, 246, 1) 0%, rgba(171, 211, 238, 1) 50%, rgba(137, 195, 235, 1) 100%);
  overflow: hidden;
}

button {
  position: absolute;
  top: 10px;
  left: 10px;
}

#light0 {
  top: 10px;
  left: 215px;
}

#light1 {
  top: 90px;
  left: 190px;
}

#light2 {
  top: 150px;
  left: 240px;
}

#light3 {
  top: 210px;
  left: 215px;
}

#light4 {
  top: 270px;
  left: 160px;
}

#light5 {
  top: 330px;
  left: 110px;
}

#light6 {
  top: 370px;
  left: 170px;
}

#light7 {
  top: 390px;
  left: 240px;
}

#light8 {
  top: 410px;
  left: 310px;
}

#light9 {
  top: 470px;
  left: 250px;
}

#light10 {
  top: 510px;
  left: 170px;
}

#light11 {
  top: 540px;
  left: 100px;
}

#light12 {
  top: 570px;
  left: 170px;
}

#light13 {
  top: 590px;
  left: 240px;
}

#light14 {
  top: 600px;
  left: 310px;
}

JavaScript

function Lamp(lampId) {
  var name = '#' + lampId;
  var status = false;
  var timeset;
  $(name).css ("position", "absolute");
  $(name).css ("border-radius", "999em");
  $(name).css ("width", "30px");
  $(name).css ("height", "30px");
  $(name).css ('background-color', "hsl(0, 0%, 50%)");
  
  var randomHSL = function() {
  	let numH = Math.floor(Math.random() * 360);
    //let numS = Math.floor(Math.random() * 100);
    //let numL = Math.floor(Math.random() * 100);
  	return "hsl(" + numH + ",100%,78%)";
	}

  var toggle = function() {
    status = !status;
    
    if (status) {
    	$(name).css ('background-color', randomHSL());
      //$(name).text (name + ' is on');
    } else {
    	$(name).css ('background-color', randomHSL());
      //$(name).text (name + ' is off');
    }
  };

  this.off = function() {
  	clearInterval(timeset);
    $(name).css ('background-color', "hsl(0, 0%, 50%)");
  }
  
  this.toggleBlink = function() {
  	timeset = setInterval (function() {toggle();}, 500);
  }
}

var power = false;
var l0 = new Lamp('light0');
var l1 = new Lamp('light1');
var l2 = new Lamp('light2');
var l3 = new Lamp('light3');
var l4 = new Lamp('light4');
var l5 = new Lamp('light5');
var l6 = new Lamp('light6');
var l7 = new Lamp('light7');
var l8 = new Lamp('light8');
var l9 = new Lamp('light9');
var l10 = new Lamp('light10');
var l11 = new Lamp('light11');
var l12 = new Lamp('light12');
var l13 = new Lamp('light13');
var l14 = new Lamp('light14');

$('#power').click (function() {
  power = !power;
  if(power){
    l0.toggleBlink();
    l1.toggleBlink();
    l2.toggleBlink();
    l3.toggleBlink();
    l4.toggleBlink();
    l5.toggleBlink();
    l6.toggleBlink();
    l7.toggleBlink();
    l8.toggleBlink();
    l9.toggleBlink();
    l10.toggleBlink();
    l11.toggleBlink();
    l12.toggleBlink();
    l13.toggleBlink();
    l14.toggleBlink();
	} else {
    l0.off();
    l1.off();
    l2.off();
    l3.off();
    l4.off();
    l5.off();
    l6.off();
   ...