<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="sanpham">
<img src="https://tse3.mm.bing.net/th/id/OIP.27o3dCOTunZMbinEQryBJwHaHa?pid=Api&P=0&h=180">
<h1>Trà Sữa Tân Châu</h1>
<p>Giá: 25000 VNĐ / ly</p>
<button onclick="trasua()">Mua Ngay</button>
</div>
<div id="hd">
<hr/>
<h1>Hóa đơn</h1>
<p> Số lượng: <span id='TongSP'> </span> ly</p>
<p>Tổng tiền: <span id='Tongtien'> </span> VND</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
#container {
background-color:white;
text-align: center;
width:400px;
border-radius:15px;
margin:80px;
}
img {
width:200px;
height:230px;
}
button {
width:120px;
height:40px;
background-color:#f5df7d;
border-radius:30px;
}
body {
background-color:#46cfcf;
padding-left:150px;
}
#hd{
display:none;
}
const Tien1ly = 25000;
function trasua(){
let nhaplieu = prompt("Bạn muốn mua bao nhiêu ly?");
let soluong = Number(nhaplieu);
let TongSL = document.getElementById('TongSP');
let Tongtien = document.getElementById('Tongtien');
if (soluong > 0) {
let Thanhtien = Tien1ly *soluong;
document.getElementById("hd").style.display = "block";
//gian gia tri cho HTML hien thi
TongSP.innerHTML = soluong;
Tongtien.innerHTML = Thanhtien;
}
else {
alert("Vui lòng nhập số lượng hợp lệ!");
}
}