<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Trung Tâm Chỉ Huy Quân Đội</h1>
<button onclick="vang()">Mặc đồng phục (Vàng)</button>
<button onclick="tim()">Ngụy trang (Tím)</button>
<button onclick="tanghinh()">Tàng hình</button>
<button onclick="taphop()">Tập hợp</button>
<button onclick="ngaunhien()">Ngẫu nhiên</button>
<div id="san-tap">
<div class='minion'>1</div>
<div class='minion'>2</div>
<div class='minion'>3</div>
<div class='minion'>4</div>
<div class='minion'>5</div>
</div>
<script src="script.js"></script>
</body>
</html>
h1{
text-align: center;
}
button{
margin:20px;
}
#san-tap{
display: flex;
gap: 30px;
justify-content: center;
}
.minion{
text-align: center;
font-size:25px;
border:solid black;
width:60px;
height:80px;
display:flex;
align-items:center;
justify-content: center;
transition:0.6s;
border-radius:20px 20px 10px 10px;
}
//lay danh sach tat ca cac minion. Ket qua tra ve la mot danh sach
let doiquan = document.getElementsByClassName('minion');
//Element phai co 's'
function vang(){
//Duyet qua tung chu minion tu dau den cuoi
for (let i = 0 ;i < doiquan.length; i++) {
doiquan[i].style.backgroundColor = "yellow";
doiquan[i].style.opacity = "0.9";
}
}
function tim(){
for (let i = 0;i < doiquan.length; i++) {
doiquan[i].style.backgroundColor = "purple";
doiquan[i].style.opacity = "0.8";
}
}
function tanghinh(){
for (let i = 0; i < doiquan.length; i++) {
doiquan[i].style.opacity = "0";
}
}
function taphop(){
for (let i = 0; i < doiquan.length; i++) {
doiquan[i].style.opacity = "1";
doiquan[i].style.backgroundColor = "white";
}
}
// '[ ]' là Mãng ; '( )' là List
const colors = ["#e32938", "#f2c633", "#de54d2", "#4c4cfc", "#8f22e3", "#d67027", "#42f563"];
function ngaunhien(){
for (let i = 0; i< doiquan.length;i++) {
let randomColor = colors[Math.floor(Math.random() * colors.length)];
doiquan[i].style.backgroundColor = randomColor;
}
}