By GokiSoft.com| 20:23 27/10/2023|
Học JS

[Share Code] [Examination] Bài Thi Thực Hành HTML/CSS/JS - C2307L

[Examination] Bài Thi Thực Hành HTML/CSS/JS

#bt2092.html

<!DOCTYPE html>
<html>
<head>
	<title>Examination Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="panel">
	<h2>DANG NHAP HE THONG</h2>
	<div class="panel-body">
		<div class="left">
			<img src="photos/login.png">
		</div>
		<div class="right">
			<div class="group-control">
				<label>Tai khoan: </label>
				<input type="text" name="username" id="username_id" placeholder="Enter user name">
			</div>
			<div class="group-control">
				<label>Mat khau: </label>
				<input type="password" name="pwd" id="pwd_id" placeholder="Enter password">
			</div>
			<div class="group-control">
				<label>&nbsp;</label>
				<button onclick="login()">Dang nhap</button>
				<button onclick="resetData()">Nhap lai</button>
			</div>
		</div>
	</div>
</div>

<div class="dialog" id="dialog-id">
	<div class="dialog-content">
		<div class="dialog-body">
			Dang nhap thanh cong
		</div>
		<div class="dialog-footer">
			<button onclick="closeDialog()">OK</button>
		</div>
	</div>
</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

#script.js

var usernameTag = document.getElementById('username_id')
var pwdTag = document.getElementById('pwd_id')

var dialogTag = document.getElementById('dialog-id')

function login() {
	let uname = usernameTag.value
	let password = pwdTag.value

	if(uname == "" || password == "") {
		alert('User Name | Password khong duoc de trong')
		return
	}

	// alert('Dang nhap thanh cong')
	dialogTag.style.display = "block"
}

function resetData() {
	usernameTag.value = ""
	pwdTag.value = ""
}

function closeDialog() {
	dialogTag.style.display = "none"
}

#style.css

.panel {
	width: 600px;
	margin: 0px auto;
	background-color: #ffffcc;
	padding: 10px;
}

.panel h2 {
	color: #0000cc;
}

.panel-body {
	display: flex;
}

.panel-body .left img {
	width: 120px;
}

.group-control {
	display: flex;
	margin-bottom: 20px;
}

.group-control label {
	width: 100px;
	color: #000066;
	font-size: 18px;
}

.group-control input {
	font-size: 16px;
	padding: 4px;
	width: 300px
}

.group-control button {
	margin-right: 10px;
	font-size: 16px;
	padding: 3px 8px;
}

/* dialog */
.dialog {
	width: 100%;
	height: 100%;
	background-color: #00000078;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
}

.dialog .dialog-content {
	width: 300px;
	margin: 0px auto;
	background-color: white;
	margin-top: 15%;
}

.dialog .dialog-body {
	padding: 30px;
	text-align: center;
}

.dialog .dialog-footer {
	background-color: #ede8e8;
	text-align: right;
	padding: 10px;
}

.dialog .dialog-footer button {
	font-size: 18px;
	padding: 6px 15px;
}

#cancel.png

https://gokisoft.com/uploads/stores/49/2023/10/cancel.png

#log_in.png

https://gokisoft.com/uploads/stores/49/2023/10/log-in.png

#login.png

https://gokisoft.com/uploads/stores/49/2023/10/login.png

#regis.png

https://gokisoft.com/uploads/stores/49/2023/10/regis.png
Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó