Scribd
Upload
9 views44 pages

Thigk Web

Uploaded by

myngannguyen174
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views44 pages

Thigk Web

Uploaded by

myngannguyen174
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 44

<!

DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Tính Tổng Tiền</title>
<style>
label, input {
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Tính Tổng Tiền</h3>
<label>Số sản phẩm <input type="text" id="soSanPham" ></label>
<label>Số tiền trên một sản phẩm <input type="number" id="giaSanPham" ></label>
<label><input type="checkbox" id="khuyenMai"> Khuyến mãi</label>
<button onclick="tinhTien()">Tính tiền</button>
<p id="tongTien">Tổng tiền: </p>

<script>
function tinhTien() {
// Lấy giá trị từ các ô nhập
const soSanPham = parseInt(document.getElementById('soSanPham').value);
const giaSanPham = parseInt(document.getElementById('giaSanPham').value);
const khuyenMai = document.getElementById('khuyenMai').checked;
// Tính tổng tiền
let tongTien = soSanPham * giaSanPham;

// Nếu chọn khuyến mãi, giảm 10%


if (khuyenMai) {
tongTien *= 0.9;
}
// Hiển thị tổng tiền
document.getElementById('tongTien').textContent = `Tổng tiền: ${tongTien} đồng`;
}
</script>
</body>
</html>
Câu 3:

<! DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>

<body>
<!-- Menu -->
<div class="menu">
<table class="menu__table">
<tr>
<td class="menu__table-day"></td>
<td>Nhân viên: <span class="menu__table-name">Đỗ Trọng Khánh</span></td>
</tr>
<tr>
<th colspan="3"><h3>THỰC ĐƠN</h3></th>
</tr>
<tr>
<td colspan="3" align="center" style="height: 250px">
<table class="table__chosse">
<tr class="table__chosse-header">
<th>Bàn</th>
<th>Món ăn</th>
</tr>
<tr>
<td style="width: 100px">
<select name="seat" id="seat">
<option value="Bàn 1">Bàn 1</option>
<option value="Bàn 2">Bàn 2</option>
<option value="Bàn 3">Bàn 3</option>
</select>
</td>
<td style="width: 150px">
<select name="food" id="food">
<option value="20000">Bún bò</option>
<option value="18000">Hủ tiếu</option>
<option value="17000">Bánh canh</option>
<option value="19000">Phở bò</option>
<option value="15000">Nuôi</option>
<option value="12000">Bánh mì thịt</option>
<option value="15000">Bánh cuốn</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Receipt -->
<div class="receipt">
<table class="receipt__table">
<tr>
<th>Bàn 1</th>
<th>Bàn 2</th>
<th>Bàn 3</th>
</tr>
<tr>
<th>
<table align="center" class="receipt-meal receipt-meal-1">
<tr>
<th>Món</th>
<th>SL</th>
<th>Tiền</th>
<th></th>
</tr>
<tr>
<th>Tổng tiền</th>
<th class="total-money total-money-1" colspan="3">0</th>
</tr>
</table>
<button class="btn-print" name="Số 1">In hoá đơn</button>
</th>
<th>
<table align="center" class="receipt-meal receipt-meal-2">
<tr>
<th>Món</th>
<th>SL</th>
<th>Tiền</th>
<th></th>
</tr>
<tr>
<th>Tổng tiền</th>
<th class="total-money total-money-2" colspan="3">0</th>
</tr>
</table>
<button class="btn-print" name="Số 2">In hoá đơn</button>
</th>
<th>
<table align="center" class="receipt-meal receipt-meal-3">
<tr>
<th>Món</th>
<th>SL</th>
<th>Tiền</th>
<th></th>
</tr>
<tr>
<th>Tổng tiền</th>
<th class="total-money total-money-3" colspan="3">0</th>
</tr>
</table>
<button class="btn-print" name="Số 3">In hoá đơn</button>
</th>
</tr>
</table>
</div>
</body>
<script>
// Hàm lấy ngày giờ hiện tại
function getDateTime() {
var today = new Date(),
current_day = today.getDay() + 1 !== 1 ? "Thứ " + String(today.getDay() + 1) : "Chủ
Nhật",
dd = String(today.getDate()).padStart(2, "0"),
mm = String(today.getMonth() + 1).padStart(2, "0"),
yyyy = today.getFullYear(),
hours = today.getHours(),
minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes();
return current_day + ", " + mm + "/" + dd + "/" + yyyy + ", " + hours + ":" + minutes;
}

// Hiển thị ngày giờ lên trang


document.querySelector(".menu__table-day").innerText = getDateTime();

var seatNumber = "Bàn 1"; // Bàn mặc định


document.getElementById("seat").addEventListener("change", function () {
seatNumber = this.value;
});

document.getElementById("food").addEventListener("change", function () {
var foodMoney = this.value,
foodName = this.options[this.selectedIndex].text,
tableReceiptMeal,
listFood,
totalMoney;

if (seatNumber === "Bàn 1") {


totalMoney = document.querySelector(".total-money-1");
listFood = document.querySelectorAll(".receipt-meal-1 .foodName");
tableReceiptMeal = document.querySelector(".receipt-meal-1 tr:last-child");
} else if (seatNumber === "Bàn 2") {
totalMoney = document.querySelector(".total-money-2");
listFood = document.querySelectorAll(".receipt-meal-2 .foodName");
tableReceiptMeal = document.querySelector(".receipt-meal-2 tr:last-child");
} else {
totalMoney = document.querySelector(".total-money-3");
listFood = document.querySelectorAll(".receipt-meal-3 .foodName");
tableReceiptMeal = document.querySelector(".receipt-meal-3 tr:last-child");
}

var flag = false;


listFood.forEach(function (item) {
if (item.querySelector(".foodName-name").innerText === foodName) {
var valueQnt = item.querySelector(".qnt"),
valueMoney = item.querySelector(".foodMoney");
valueQnt.value = Number(valueQnt.value) + 1;
valueMoney.value = Number(valueMoney.value) + Number(foodMoney);
totalMoney.innerText = Number(totalMoney.innerText) + Number(foodMoney);
flag = true;
}
});

if (!flag) {
var newRow = document.createElement("tr");
newRow.classList.add("foodName");
newRow.innerHTML = `
<td class="foodName-name">${foodName}</td>
<td><input class="qnt" value="1"></td>
<td><input class="foodMoney" value="${foodMoney}"></td>
<td><button class="btn-del">Xoá</button></td>
`;
tableReceiptMeal.before(newRow);
totalMoney.innerText = Number(totalMoney.innerText) + Number(foodMoney);
}
});

document.addEventListener("click", function (event) {


if (event.target.classList.contains("btn-del")) {
var moneyDel = event.target.closest(".foodName").querySelector(".foodMoney").value,
newTotalMoney = event.target.closest(".receipt-meal").querySelector(".total-money");
newTotalMoney.innerText = Number(newTotalMoney.innerText) - Number(moneyDel);
event.target.closest("tr").remove();
}
});

document.querySelectorAll(".btn-print").forEach(function (button) {
button.addEventListener("click", function () {
localStorage.setItem("dateTime", getDateTime());
localStorage.setItem("staffName", document.querySelector(".menu__table-
name").innerText);
localStorage.setItem("seatNum", this.getAttribute("name"));
var htmlFoodList = "",
listFood,
totalMoney;

if (this.name === "Số 1") {


listFood = document.querySelectorAll(".receipt-meal-1 .foodName");
totalMoney = document.querySelector(".total-money-1").innerText;
} else if (this.name === "Số 2") {
listFood = document.querySelectorAll(".receipt-meal-2 .foodName");
totalMoney = document.querySelector(".total-money-2").innerText;
} else {
listFood = document.querySelectorAll(".receipt-meal-3 .foodName");
totalMoney = document.querySelector(".total-money-3").innerText;
}

listFood.forEach(function (item) {
var name = item.querySelector(".foodName-name").innerText,
money = item.querySelector(".foodMoney").value,
qnt = item.querySelector(".qnt").value;
htmlFoodList += "<tr><td>" + name + "</td><td>" + qnt + "</td><td>" + money +
"</td></tr>";
});
htmlFoodList += "<tr><th>Tổng tiền</th><th class='print-total-money' colspan='2'>" +
totalMoney + " đ</th></tr>";
localStorage.setItem("foodList", htmlFoodList);
window.location.href = "./receipt_infor.html";
});
});
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<!--Receipt -->
<div class="print-receipt">
<h3 class="print-receipt__header">Hoá đơn</h3>
<p>Ngày hoá đơn: <span class="print-receipt__day"></span></p>
<p>Nhân viên: <span class="print-receipt__name"></span></p>
<p>Bàn: <span class="print-receipt__seat"></span></p>
<table class="print-receipt__tbl">
<tr>
<th>Món</th>
<th>SL</th>
<th>Thành tiền</th>
</tr>
</table>
</div>
</body>
<script>
document.querySelector(".print-receipt__day").innerText =
localStorage.getItem("dateTime") || "";
document.querySelector(".print-receipt__name").innerText =
localStorage.getItem("staffName") || "";
document.querySelector(".print-receipt__seat").innerText =
localStorage.getItem("seatNum") || "";
const foodListHTML = localStorage.getItem("foodList") || "";
document.querySelector(".print-receipt__tbl").insertAdjacentHTML("beforeend",
foodListHTML);
</script>
</html>
body {
box-sizing: border-box;
}
h3 {
margin: 0;
}
table,
td,
th {
font-size: 18px;
line-height: 30px;
font-weight: 600;
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
#seat,
#food {
margin: 0 24px 120px;
font-size: 14px;
}
.menu {
display: flex;
justify-content: center;
}
.menu__table {
width: 50%;
}

.table__chosse-header {
font-size: 12px;
color: #cccc99;
background-color: #0033cc;
}
.receipt {
display: flex;
justify-content: center;
margin-top: 12px;
}
.receipt__table {
width: 80%;
}
.receipt-meal {
width: 100%;
}
input {
width: 50px;
text-align: center;
font-size: 18px;
outline: none;
border: none;
}
.print-receipt {
border: 1px solid black;
padding: 12px;
margin: 150px 470px;
width: 450px;
font-size: 18px;
}
.print-total-money {
padding-left: 70px;
}
.print-receipt p {
margin: 12px;
}
.print-receipt__header {
text-align: center;
font-size: 20px;
}
.print-receipt__day {
margin-left: 100px;
}
.print-receipt__name {
margin-left: 128px;
}
.print-receipt__seat {
margin-left: 174px;
}
.print-receipt__tbl {
width: 300px;
margin: 0 50px;
border: none;
}
.print-receipt__tbl th,
.print-receipt__tbl td {
border: none;
}

.print-receipt__tbl td {
text-align: center;
font-weight: 400;
}
.print- receipt__tbl-total {
padding-left: 70px;
}
Bài 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" href="./main.css"/>
<title>Document</title>
</head>
<body>
<div class="content">
<table class="content-table">
<th align="top" colspan="3">
<h1>Phiếu đăng ký Tour du lịch</h1>
</th>
<tr>
<td>Họ và tên Khách</td>
<td><input type="text" id="ClientName" placeholder="Nguyen Van A"/></td>
</tr>
<tr>
<td>Địa chỉ</td>
<td><input type="text" id="address" placeholder="119 Nguyễn Du"/></td>
</tr>
<tr>
<td>Điện thoại</td>
<td><input type="text" id="PhoneNumber" placeholder="09xxxxxxxx"/></td>
</tr>
<tr>
<td>Tour</td>
<td>
<select name="TourName" id="TourName">
<option>Chọn tour</option>
<option value="10000000">Hà Nội - Hạ Long - Tuần Châu</option>
<option value="6000000">Hà Nội - Sapa</option>
<option value="3000000">Đà Nẵng - Hội An</option>
<option value="2000000">Buôn Mê Thuộc - Kon Tum</option>
<option value="3500000">TP.HCM - Nha Trang</option>
<option value="2500000">TP.HCM - Cần Thơ - Cà Mau</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" class="Customer">
Người lớn
<input type="number" id="Adult">
Trẻ em
<input type="number" id="Child">
</td>
</tr>
<tr>
<td>Ghi chú</td>
<td><input type="text" id="Note" /></td>
</tr>
<tr>
<th colspan="3">
<button class="Register" id="registerButton">
Đăng ký
</button>
</th>
</tr>
</table>
</div>
</body>
<script>
// Hàm lấy ngày hiện tại
function getDate() {
var today = new Date();
var receipt_day = today.getDay() + 1 !== 1 ? "Thứ " + String(today.getDay() + 1) :
"Chủ Nhật";
var d = String(today.getDate()).padStart(2, "0");
var m = String(today.getMonth() + 1).padStart(2, "0");
var y = today.getFullYear();
var h = today.getHours();
var minute = today.getMinutes() < 10 ? "0" + today.getMinutes() :
today.getMinutes();
return receipt_day + ", " + m + "/" + d + "/" + y + ", " + h + ":" + minute;
}

// Hàm lưu thông tin và chuyển hướng đến trang hóa đơn
document.getElementById("registerButton").addEventListener("click", function () {
var tourDropdown = document.getElementById("TourName");
var tourNumber = tourDropdown.value;
var tourName = tourDropdown.options[tourDropdown.selectedIndex].text;

var adultNumber = document.getElementById("Adult").value || 0;


var childNumber = document.getElementById("Child").value || 0;
var adultVal = adultNumber * tourNumber;
var childVal = childNumber * (tourNumber / 2);
var totalVal = adultVal + childVal;

localStorage.setItem("Date", getDate());
localStorage.setItem("StaffName", "Phạm Anh Khoa");
localStorage.setItem("ClientName",
document.getElementById("ClientName").value);
localStorage.setItem("Address", document.getElementById("address").value);
localStorage.setItem("TourName", tourName);
localStorage.setItem("TourVal", tourNumber);
localStorage.setItem("Note", document.getElementById("Note").value);
localStorage.setItem("AdultNumber", adultNumber);
localStorage.setItem("AdultVal", adultVal);
localStorage.setItem("ChildNumber", childNumber);
localStorage.setItem("ChildVal", childVal);
localStorage.setItem("TotalVal", totalVal);

window.location.href = 'receipt.html';
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="./main1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<title>Document</title>
</head>
<body>
<div class="Receipt">
<div class="Receipt-content">
<h1 class="Receipt-header">Thông tin đăng ký</h1>
<p>Ngày đăng ký: <span style="margin-left: 106px"
class="receipt-day"></span></p>
<p>Nhân viên: <span style="margin-left: 136px"
class="receipt-staff"></span></p>
<p>Họ tên khách: <span style="margin-left: 112px"
class="receipt-client"></span></p>
<p>Địa chỉ: <span style="margin-left: 159px"
class="receipt-address"></span></p>
<p>Tour: <span style="margin-left: 182px" class="receipt-tour"></span></p>
<p>Ghi chú: <span style="margin-left: 156px"
class="receipt-note"></span></p>
<p>Số lượng khách đoàn</p>
<table class="Receipt-table">
<tr>
<td></td>
<td><h1>SL</h1></td>
<td><h1>Đơn giá</h1></td>
<td><h1>Thành Tiền</h1></td>
</tr>
<tr>
<td>Người lớn</td>
<td><span class="receipt-AdultNumber"></span></td>
<td><span class="receipt-TourVal"></span></td>
<td><span class="receipt-AdultVal"></span></td>
</tr>
<tr>
<td>Trẻ em</td>
<td><span class="receipt-ChildNumber"></span></td>
<td><span class="receipt-TourVal"></span></td>
<td><span class="receipt-ChildVal"></span></td>
</tr>
<tr>
<th colspan="2"><h1 class="Receipt-table-total">Tổng tiền</h1></th>
<th colspan="2"><h1 class="receipt-TotalVal"></h1></th>
</tr>
</table>
</div>
</div>
</body>
<script>
document.querySelector(".receipt-day").textContent = localStorage.getItem("Date");
document.querySelector(".receipt-staff").textContent =
localStorage.getItem("StaffName");
document.querySelector(".receipt-client").textContent =
localStorage.getItem("ClientName");
document.querySelector(".receipt-address").textContent =
localStorage.getItem("Address");
document.querySelector(".receipt-tour").textContent =
localStorage.getItem("TourName");
document.querySelector(".receipt-note").textContent =
localStorage.getItem("Note");
document.querySelector(".receipt-TourVal").textContent =
localStorage.getItem("TourVal");
document.querySelector(".receipt-AdultNumber").textContent =
localStorage.getItem("AdultNumber");
document.querySelector(".receipt-ChildNumber").textContent =
localStorage.getItem("ChildNumber");
document.querySelector(".receipt-AdultVal").textContent =
localStorage.getItem("AdultVal");
document.querySelector(".receipt-ChildVal").textContent =
localStorage.getItem("ChildVal");
document.querySelector(".receipt-TotalVal").textContent =
localStorage.getItem("TotalVal") + " đ";
</script>
</html>
table,
td,
tr {
font-size: 18px;
line-height: 30px;
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
td {
color: blue;
width: 50%;
margin-left: 5px;
}
table {
background-color: #ffdd99;
border: 1px solid black;
margin: 10px;
}
.content {
border: 1px solid black;
width: 50%;
background-color: #ffdd99;
display: flex;
justify-content: center;
margin: 100px 400px;
}
.Customer {
margin: 5px;
width: 100%;
border: 1px solid #8264b3;
display: flex;
position: relative;
}
.Customer::before {
content: "Số lượng đoàn khách";
position: absolute;
top: -12px;
left: 10px;
z-index: 1;
}
#ClientName,
#address,
#PhoneNumber,
#TourName {
width: 60%;
}
.Number-customer td {
border: none;
}
#Adult,
#Child {
margin: 10px;
width: 10%;
}
#Note {
width: 100%;
padding: 60px 0;
margin-right: 0px 0;
}
.Register {
text-align: center;
border-radius: 1px;
border: 1px solid;
font-size: 15px;
line-height: 20px;
margin: 4px 0;
}
h1 {
font-size: 22px;
margin: 0;
}
td {
font-size: 20px;
margin: 14px;
padding: 8px;
}
.Receipt {
border: 1px solid black;
margin: 100px 460px;
width: 530px;
}
.Receipt-content {
padding: 8px 8px 20px;
}
.Receipt-content p {
font-size: 20px;
margin: 14px;
}
.Receipt-header {
text-align: center;
font-size: 22px;
margin: 0;
}
.Receipt-table {
padding: 50 px;
width: 100%;
}
Câu 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>

<body>
<div class="cart">
<table class="cart-table" style="background-color: #ffedca">
<tr>
<th>Sản phẩm</th>
<th>Số lượng</th>
<th>Đơn giá</th>
<th>Thành tiền</th>
<th>Chức năng</th>
</tr>
<tr>
<td>IPhone 11 Pro Max 64GB</td>
<td><input type="number" value="0" /></td>
<td><input type="text" /></td>
<td class="money"></td>
<th><button class="btn-del">Xoá</button></th>
</tr>
<tr>
<td>Samsung Galaxy Note 10+</td>
<td><input type="number" value="0" /></td>
<td><input type="text" /></td>
<td class="money"></td>
<th><button class="btn-del">Xoá</button></th>
</tr>
<tr>
<td colspan="3">Tổng tiền</td>
<td colspan="2" class="total-money">0</td>
</tr>
</table>
</div>
<script>
function updateMoney() {
let totalMoney = 0;
const moneyElements = document.querySelectorAll(".money");
moneyElements.forEach((moneyElem) => {
totalMoney += Number(moneyElem.textContent || 0);
});
document.querySelector(".total-money").textContent = totalMoney;
}
const quantityInputs = document.querySelectorAll("input[type=number]");
quantityInputs.forEach((input) => {
input.addEventListener("change", function () {
const quantity = this.value;
const price = this.closest("tr").querySelector("input[type=text]").value;
const moneyElem = this.closest("tr").querySelector(".money");
moneyElem.textContent = quantity * price;
updateMoney();
});
});
const priceInputs = document.querySelectorAll("input[type=text]");
priceInputs.forEach((input) => {
input.addEventListener("change", function () {
const price = this.value;
const quantity = this.closest("tr").querySelector("input[type=number]").value;
const moneyElem = this.closest("tr").querySelector(".money");
moneyElem.textContent = quantity * price;
updateMoney();
});
});
const deleteButtons = document.querySelectorAll(".btn-del");
deleteButtons.forEach((button) => {
button.addEventListener("click", function () {
this.closest("tr").remove();
updateMoney();
});
});
</script>
</body>
</html>
body {
box-sizing: border-box;
}
table,
th,
td {
border: 1px solid black;
font-weight: 600;
th,
td {
width: 185px;
height: 30px;
}
input {
width: 190px;
height: 25px;
}
.cart {
display: flex;
justify-content: center;
margin-top: 100px;
}
.money,
.total-money {
padding-left: 4px;
}
.btn-del {
border: 1px solid black;
border-radius: 5px;
width: 30px;
width: 50px;
height: 25px;
}
Câu 7:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đăng ký CV</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.form-container {
border: 1px solid #000;
width: 400px;
padding: 10px;
}
.form-container table {
width: 100%;
border-collapse: collapse;
}
.form-container th {
text-align: center;
padding: 8px;
font-size: 18px;
}
.form-container td {
padding: 8px;
border: 1px solid #000;
vertical-align: top;
}
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="file"] {
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.form-container input[type="range"] {
width: 90%;
}
.add-skill-btn {
color: blue;
cursor: pointer;
font-size: 14px;
margin-top: 5px;
display: inline-block;
}
.submit-btn {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #ccc;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>

<div class="form-container">
<form>
<table>
<tr>
<th colspan="2">Đăng ký CV</th>
</tr>
<tr>
<td>Họ và tên</td>
<td><input type="text" id="fullName"></td>
</tr>
<tr>
<td>Địa chỉ</td>
<td><input type="text" id="address"></td>
</tr>
<tr>
<td>Điện thoại</td>
<td><input type="text" id="phone"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" id="email"></td>
</tr>
<tr>
<td>Nghề nghiệp</td>
<td><input type="text" id="job"></td>
</tr>
<tr>
<td>Ảnh đại diện</td>
<td><input type="file" id="avatar"></td>
</tr>
<tr>
<td>Kỹ năng</td>
<td>
<table style="width: 100%;">
<tr>
<td><strong>Tên kỹ năng</strong></td>
<td><strong>Mức độ</strong></td>
</tr>
<tbody id="skills-container">
<tr class="skill-entry">
<td><input type="text" placeholder="Tên kỹ năng" id="skillName1"></td>
<td><input type="range" min="0" max="100" step="10"
id="skillLevel1"></td>
</tr>
</tbody>
</table>
<span class="add-skill-btn" onclick="addSkill()">Thêm</span>
</td>
</tr>
</table>
<button type="button" class="submit-btn" onclick="register()">Đăng ký</button>
</form>
</div>

<script>
let skillCount = 0;

function addSkill() {
skillCount++;
const skillsContainer = document.getElementById('skills-container');
const skillDiv = document.createElement('div');
skillDiv.classList.add('skill');
skillDiv.innerHTML = `
<input type="text" placeholder="Tên kỹ năng" id="skillName${skillCount}">
<input type="range" min="0" max="100" step="10" id="skillLevel${skillCount}">
`;
skillsContainer.appendChild(skillDiv);
}

function register() {
const fullName = document.getElementById('fullName').value;
const address = document.getElementById('address').value;
const phone = document.getElementById('phone').value;
const email = document.getElementById('email').value;
const job = document.getElementById('job').value;

const skills = [];


for (let i = 1; i <= skillCount; i++) {
const skillName = document.getElementById(`skillName${i}`).value;
const skillLevel = document.getElementById(`skillLevel${i}`).value;
skills.push({ name: skillName, level: skillLevel });
}
localStorage.setItem('fullName', fullName);
localStorage.setItem('address', address);
localStorage.setItem('phone', phone);
localStorage.setItem('email', email);
localStorage.setItem('job', job);
localStorage.setItem('skills', JSON.stringify(skills));

window.location.href = 'result.html';
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kết quả CV</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.result-container {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.result-container img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
.result-container h2 {
margin: 10px 0;
font-size: 24px;
}
.info-item {
display: flex;
align-items: center;
margin: 8px 0;
font-size: 14px;
color: #555;
}
.info-item i {
margin-right: 8px;
color: #008080;
}
.skills {
margin-top: 20px;
text-align: left;
}
.skills h3 {
font-size: 18px;
color: #008080;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.skill-item {
margin-bottom: 10px;
}
.skill-name {
font-size: 14px;
color: #333;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: #ddd;
border-radius: 4px;
overflow: hidden;
}
.progress {
height: 100%;
background-color: #008080;
}
</style>
</head>
<body>
<div class="result-container">
<img src="your-image-url.jpg" alt="Ảnh đại diện">
<h2 id="fullName">Nguyễn Văn C</h2>
<div class="info-item"><i class="fas fa-briefcase"></i> <span
id="job">Designer</span></div>
<div class="info-item"><i class="fas fa-home"></i> <span id="address">TP.
HCM</span></div>
<div class="info-item"><i class="fas fa-envelope"></i> <span
id="email">[email protected]</span></div>
<div class="info-item"><i class="fas fa-phone"></i> <span
id="phone">0900000000</span></div>

<div class="skills">
<h3><i class="fas fa-star"></i> Kỹ năng</h3>
<div id="skillsList"></div>
</div>
</div>
<script>
document.getElementById('fullName').textContent = localStorage.getItem('fullName');
document.getElementById('address').textContent = localStorage.getItem('address');
document.getElementById('phone').textContent = localStorage.getItem('phone');
document.getElementById('email').textContent = localStorage.getItem('email');
document.getElementById('job').textContent = localStorage.getItem('job')
const skillsList = document.getElementById('skillsList');
const skills = JSON.parse(localStorage.getItem('skills'));
skills.forEach(skill => {
const skillDiv = document.createElement('div');
skillDiv.classList.add('skill');
skillDiv.innerHTML = `<strong>${skill.name}:</strong> ${skill.level}%`;
skillsList.appendChild(skillDiv);
});
</script>
</body>
</html>
BT TRÊN LỚP
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form thông tin liên hệ nhóm</title>
<style>
.container {
width: 480px;
margin: auto;
border: 2px solid darkcyan;
padding: 20px;
font-size: 22px;
}

h2 {
color: #e53935;
font-weight: bold;
text-align: center;
}

input[type="text"],
input[type="url"],
select,
textarea {
width: 100%;
padding: 4px;
margin-bottom: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}

button {
width: 150px;
padding: 10px;
background-color: darkorange;
border: none;
font-weight: bold;
cursor: pointer;
margin: 0 5px;
}
fieldset {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}

legend {
font-weight: bold;
}

.button-container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>THÔNG TIN LIÊN HỆ NHÓM</h2>
<form action="GroupInfo.php" method="post">
<div>
<label for="groupName">Tên nhóm</label>
<input type="text" name="groupName" id="groupName" placeholder="Nhập tên của
nhóm bạn">
</div>
<div>
<label for="groupLeader">Nhóm trưởng</label>
<input type="text" name="groupLeader" id="groupLeader" placeholder="Nhập họ tên
của người nhóm trưởng">
</div>
<fieldset>
<legend>Trang web giới thiệu đồ án của nhóm</legend>
<div>
<label for="platform">Nền tảng:</label>
<select name="platform" id="platform">
<option value="C1">Chọn các nền tảng trang web của nhóm</option>
<option value="C2">Wordpress</option>
<option value="C3">Google</option>
<option value="C4">Wix</option>
<option value="C5">Github</option>
<option value="C6">Khác</option>
</select>
</div>
<div>
<label for="websiteUrl">Địa chỉ</label>
<input type="url" name="websiteUrl" id="websiteUrl" placeholder="Nhập địa chỉ
trang web của nhóm">
</div>
</fieldset>
<div>
<label for="otherComments">Ý kiến khác của nhóm</label>
<textarea id="otherComments" name="otherComments" ></textarea>
</div>
<div class="button-container">
<button type="submit">Submit</button>
<button type="reset">Cancel</button>
</div>
</form>
</div>
</body>
</html>

You might also like