<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Giỏ Hàng Của Tôi</h1>
<label>Nhập giá tiền món đồ (VND): </label>
<input type="number" id="Price">
<button onclick="additem()" id="add">Thêm vào giỏ</button>
<h3>Danh sách giá các món:</h3>
<li id="itemlist"></li>
<hr/>
<button onclick="Tongtien()" id="total">Tính Tổng Tiền</button>
<h2>Tổng: <span id="total">0</span> VND</h2>
<button onclick="Dattien()" id="expensive">Đánh dấu đồ đắt tiền</button>
<script src="script.js"></script>
</body>
</html>
input {
width:150px;
}
body {
text-align:center;
background-color:#319c25;
}
#add{
border-radius:20px;
height:45px;
width:130px;
background-color:#40e348;
font-size:18px;
}
@keyframes bgChange {
0% { color: red; }
25% { color:orange; }
50% { color: yellow; }
75% { color:green; }
100% { color: blue; }
}
h1{
animation-name:bgChange;
animation-duration:1s;
animation-iteration-count:infinite;
}
#total{
border-radius:15px;
height:30px;
background-color:#3bad82;
font-size:15px;
}
#expensive{
width:160px;
border-radius:15px;
height:40px;
background-color:#3cbec9;
font-size:15px;
}
label{
font-size:20px;
}
h3{
font-size:25px;
}
let prices = [];
function additem() {
let gia = Number(document.getElementById("Price").value);
if (gia > 0) {
prices.push(gia);
let htmlMoi = '<div class="item-gia">Món hàng: ' + gia.toLocaleString("vi-VN") + ' VNĐ</div>';
document.getElementById("itemlist").innerHTML += htmlMoi;
}
}
function Tongtien() {
let total = 0;
for (let i = 0; i < prices.length; i++) {
total += prices[i];
}
document.getElementById("total").innerHTML = "Tổng: " + total.toLocaleString("vi-VN") + " VND";
}
function Dattien() {
let items = document.getElementsByClassName("item-gia");
for (let i = 0; i < prices.length; i++) {
if (prices[i] > 500000) {
items[i].style.backgroundColor = "yellow";
items[i].style.color = "white";
}
}
}