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

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

Name: Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
Address: Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

#login.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
	<h1>DANG NHAP HE THONG</h1>
	<div class="row">
		<div class="w25">
			<img src="photos/login.png" style="width: 100px">
		</div>
		<div class="w75">
			<form method="post">
				<div class="item">
					<label>Tai Khoan: </label>
					<input required type="text" name="username" id="username_id">
				</div>
				<div class="item">
					<label>Mat Khau: </label>
					<input required type="password" name="pwd" id="pwd_id">
				</div>
				<div class="item">
					<label></label>
					<input type="button" onclick="validateData()" value="Dang Nhap">
					<input type="reset" value="Nhap Lai">
				</div>
			</form>
		</div>
	</div>
</div>

<div class="popup" id="popup_id">
	<div class="popup-content">
		<div class="msg">
			DANG NHAP THANH CONG
		</div>
		<div class="footer">
			<button onclick="hidePopup()">OK</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	function validateData() {
		uTag = document.getElementById('username_id')
		pTag = document.getElementById('pwd_id')

		if(uTag.value == '' || pTag.value == '') {
			alert('Yeu cau nhap ten hoac mat khau')
		} else {
			// alert('Dang Nhap Thanh Cong')
			popupTag = document.getElementById('popup_id')
			popupTag.style.display = "block"
		}
	}

	function hidePopup() {
		popupTag = document.getElementById('popup_id')
		popupTag.style.display = "none"
	}
</script>
</body>
</html>

#login2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
	<h1>DANG NHAP HE THONG</h1>
	<div class="row">
		<div class="w25">
			<img src="photos/login.png" style="width: 100px">
		</div>
		<div class="w75">
			<form method="post" onsubmit="return validateData()">
				<div class="item">
					<label>Tai Khoan: </label>
					<input required type="text" name="username" id="username_id">
				</div>
				<div class="item">
					<label>Mat Khau: </label>
					<input required type="password" name="pwd" id="pwd_id">
				</div>
				<div class="item">
					<label></label>
					<input type="submit" value="Dang Nhap">
					<input type="reset" value="Nhap Lai">
				</div>
			</form>
		</div>
	</div>
</div>

<div class="popup" id="popup_id">
	<div class="popup-content">
		<div class="msg">
			DANG NHAP THANH CONG
		</div>
		<div class="footer">
			<button onclick="hidePopup()">OK</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	function validateData() {
		popupTag = document.getElementById('popup_id')
		popupTag.style.display = "block"

		return false;
	}

	function hidePopup() {
		popupTag = document.getElementById('popup_id')
		popupTag.style.display = "none"
	}
</script>
</body>
</html>

#order.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Order Page</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
	<div class="row" style="display: block">
		<form method="post">
			<div class="item">
				<label style="text-align: right;"><img src="photos/regis.png" style="width: 40px"></label>
				<h3>PHIEU MUON SACH</h3>
			</div>
			<div class="item">
				<label>Tai Khoan: </label>
				<input required type="text" name="username" id="username_id">
			</div>
			<div class="item">
				<label>Mat Khau: </label>
				<input required type="password" name="pwd" id="pwd_id">
			</div>
			<div class="item">
				<label></label>
				<button type="button"><img src="photos/log_in.png" style="width: 15px"> Dang Ky</button>
				<button type="button"><img src="photos/cancel.png" style="width: 15px"> Dang Nhap</button>
			</div>
		</form>
	</div>
</div>
</body>
</html>

#style.css

body {
	margin: 0px;
	padding: 0px;
}

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

.container h1 {
	font-family: arial;
	color: #0000cc;
	text-align: center;
}

.row {
	width: 100%;
	display: flex;
}

.row .w25 {
	width: 25%;
}

.row .w75 {
	width: 75%;
}

.item {
	width: 100%;
	display: flex;
	margin-bottom: 25px;
}

.item label {
	width: 30%;
	color: #000066;
	font-weight: bold;
}

.item input {
	margin-right: 10px;
}

.popup {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgb(0, 0, 0, 0.4);
	top: 0px;
	display: none;
}

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

.popup-content .msg {
	padding: 30px;
}

.popup-content .footer {
	background-color: #ededed;
	width: 100%;
	height: 30px;
}

.popup-content .footer button {
	float: right;
	margin-top: 5px;
	margin-right: 5px;
}

button {
	margin-right: 10px;
}

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

5

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