Coloreaza Patratul

by MariusNastasa

HTML

<button class="dig" onclick="colorButton()">&nbsp;1</button>
<button id="bx" onclick="colorButton()">&nbsp;2</button>
<button onclick="colorButton()">&nbsp;3</button>
<button id="bx" onclick="colorButton()">&nbsp;4</button>
<button onclick="colorButton()">&nbsp;5</button>
<button id="bx" onclick="colorButton()">&nbsp;6</button>
<button onclick="colorButton()">&nbsp;7</button>
<button id="bx" onclick="colorButton()">&nbsp;8</button>
<button onclick="colorButton()">&nbsp;9</button>
<button class="dig" id="bx" onclick="colorButton()">10</button>
<br>
<button id="bx" onclick="colorButton()">11</button>
<button class="dig" onclick="colorButton()">12</button>
<button id="bx" onclick="colorButton()">13</button>
<button onclick="colorButton()">14</button>
<button id="bx" onclick="colorButton()">15</button>
<button onclick="colorButton()">16</button>
<button id="bx" onclick="colorButton()">17</button>
<button onclick="colorButton()">18</button>
<button class="dig" id="bx" onclick="colorButton()">19</button>
<button onclick="colorButton()">20</button>
<br>
<button onclick="colorButton()">21</button>
<button id="bx" onclick="colorButton()">22</button>
<button class="dig" onclick="colorButton()">23</button>
<button id="bx" onclick="colorButton()">24</button>
<button onclick="colorButton()">25</button>
<button id="bx" onclick="colorButton()">26</button>
<button onclick="colorButton()">27</button>
<button class="dig" id="bx" onclick="colorButton()">28</button>
<button onclick="colorButton()">29</button>
<button id="bx" onclick="colorButton()">30</button>
<br>
<button id="bx" onclick="colorButton()">31</button>
<button onclick="colorButton()">32</button>
<button id="bx" onclick="colorButton()">33</button>
<button class="dig" onclick="colorButton()">34</button>
<button id="bx" onclick="colorButton()">35</button>
<button onclick="colorButton()">36</button>
<button class="dig" id="bx" onclick="colorButton()">37</button>
<button onclick="colorButton()">38</button>
<button id="bx"...

CSS

button {
  font-family: comic-sans;
  width: 45px;
  height: 45px;
  border: 2px;
  margin: 2px;
  font-size: 10px;
  border-radius: 1px;
  font-weight: bold;
}

#reset,
#par,
#diagonala,
#tabla {
  width: 100px;
  height: 45px;
  font-size: 15px;
}


#par:hover,
#diagonala:hover,
#tabla:hover {
  background-color: Red;
  color: Blue;
}
/*
#reset,#par,#diagonala,#tabla {
	-moz-box-shadow:inset 0px 34px 0px -15px #b54b3a;
	-webkit-box-shadow:inset 0px 34px 0px -15px #b54b3a;
	box-shadow:inset 0px 34px 0px -15px #b54b3a;
	background-color:#a73f2d;
	border:1px solid #241d13;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #7a2a1d;
}*/


#reset,#par,#diagonala,#tabla:active {
	position:relative;
	top:1px;
}

JavaScript

function colorButton() {
  var R = Math.floor(Math.random() * 255);
  var G = Math.floor(Math.random() * 255);
  var B = Math.floor(Math.random() * 255);
  this.event.target.style.background = "RGB(" + R + "," + G + "," + B + ")";
}
resetColor = function() {
  var allButtons = document.getElementsByTagName("button");
  for (var i = 0; i < allButtons.length; i++) {
    allButtons[i].style.background = "RGB(221,221,221)";
  }
}

function parImpar() {
  //if (allButtons[i].id=="bx"){
  //allButtons[i].style.background="RGB(221,221,221)";
  var allButtons = document.getElementsByTagName("button");
  for (var i = 0; i < allButtons.length -2; i++) {
    if (i % 2 == 0) {
      allButtons[i].style.background = "RGB(221,0,0)";
    } else {
      allButtons[i].style.background = "RGB(0,0,255)";
    }
  }
}

function tablaSah() {
  var allButtons = document.getElementsByTagName("button");
  for (var i = 0; i < allButtons.length - 4; i++) {
    if (allButtons[i].id == "bx") {
      allButtons[i].style.background = "RGB(255,255,255)";
    } else {
      allButtons[i].style.background = "RGB(0,0,0)";
    }
  }
}

function diagonala() {
  var allButtons = document.getElementsByClassName("dig");
  for (var i = 0; i < allButtons.length; i++) {
      if (allButtons[i].class == "dig") {
        allButtons[i].style.background = "RGB(255,255,255)";
      } else {
        allButtons[i].style.background = "RGB(0,0,0)";
      }
    }
}