Punctul 1 bun

Patrat

by MariusNastasa

HTML

<div class="grup">
<h2>Punctul 1</h2>
<div class="btn-group">
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<br>
<br>
<button class="red" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="red" ></button>
<br>
<br>
<button class="red" ></button>
<button class="blue" ></button>
<button class="green" ></button>
<button class="green" ></button>
<button class="green" ></button>
<button class="blue" ></button>
<button class="red" ></button>
<br>
<br>
<button class="red" ></button>
<button class="blue" ></button>
<button class="green" ></button>
<button class="yellow" ></button>
<button class="green" ></button>
<button class="blue" ></button>
<button class="red" ></button>
<br>
<br>
<button class="red" ></button>
<button class="blue" ></button>
<button class="green" ></button>
<button class="green" ></button>
<button class="green" ></button>
<button class="blue" ></button>
<button class="red" ></button>
<br>
<br>
<button class="red" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="blue" ></button>
<button class="red" ></button>
<br>
<br>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
<button class="red" ></button>
</div>
<br>
<br>
<button class="red" onCLick="red()">Red</button>
<button class="blue" onClick="blue()">Blue</button>
<button class="green" onClick="green()">Green</button>
<button class="yellow" onClick="yellow()">Yellow</button>
<button id="reset" onCLick="resetColor()">Reset Color</button>

</div>

CSS

.btn-group button {
    border: 1px solid black; 
    padding: 10px 24px;
    float: left;
    height: 37.5px;
}
.grup{
  height:170px;
  width:350px;
}

JavaScript

function red() {
   var red = document.getElementsByClassName("red");
   for (var i = 0; 1 < red.length; i++) {
   red[i].style="background-color: red;"
   }
}

function blue(){
    var blue = document.getElementsByClassName("blue");
 for (var i = 0; 1 < blue.length; i++) {
   blue[i].style="background-color: blue;"
   }
}

function green(){
    var green = document.getElementsByClassName("green");
 for (var i = 0; 1 < green.length; i++) {
   green[i].style="background-color: green;"
   }
}

function yellow(){
    var yellow = document.getElementsByClassName("yellow");
 for (var i = 0; 1 < yellow.length; i++) {
   yellow[i].style="background-color: yellow;"
   }
}

resetColor = function() {
  var allButtons = document.getElementsByTagName("button");
  for (var i = 0; i < allButtons.length; i++) {
    allButtons[i].style.background = "RGB(221,221,221)";
  }
}