Assignment lập trình cơ sở với javascript fpt polytechnic
Phát hành: 21/3/2023
Bạn đang cần tìm một bài mẫu, code mẫu cảu assignment lập trình cơ sở với javascript WEB1043 thì đây chính xác là bài viết dành cho bạn, bạn không cần tìm nhiều ở đâu nữa nhé vì trong bài này mình sẽ chia sẻ full code dành cho bạn.
Có thể khi lấy code về bạn muốn hiểu nó tại sao hoạt động như vậy thì bạn có thể xem lại tất cả các bài lab của lập trình cơ sở với javascript nhà mình có đăng tải trước đó nhé.
Phần 1: Link phần 1 cho bạn.
Phần 2: Link phần 2 cho bạn.
Một số lưu ý mình muốn nói khi các bạn lấy code về, đây là lập trình với javascript nên mình không chú trọng lắm vào html hay css và javascript mình đã hoàn thiện hết nhé bạn chỉ cần nâng cấp nên thôi nhưng chắc chắn một điều là nó sẽ có bug mình biết nhưng mình không nói đâu để cho các bạn tự tìm nhé. Bạn nào muốn chỉnh chú nhất có thể liên hệ mình nhưng sẽ có phí.
- Load/chạy được giao diện cơ bản, khởi tạo được các đối tượng và các hàm cần xử lý.
- Hiệu ứng chi tiết sản phẩm (onmouseover) hoặc tương ứng.
- Có sử dụng slider (có control và xử lý control).
- Có sử dụng form và kiểm lỗi form.
- Shoping cart hoặc tương ứng.
- Sử dụng một hoặc các nâng cao sau:
- Geolocation
- Media
- Countdown clock (áp dụng: ví dụ thiết lập thời gian flash sale sản phẩm).
<!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" />
<title>Assignment</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="./style.css" />
<script defer src="./app.js"></script>
</head>
<body>
<div id="root">
<header class="header">
<div class="wrapper-header">
<div class="logo">
<h1 class="logo-name">MShop</h1>
</div>
<nav class="navigate">
<a href="" class="navigate-link">Home</a>
<a href="" class="navigate-link">Laptop</a>
<a href="" class="navigate-link">Keyboard</a>
</nav>
<div class="action">
<div class="action-icon icon-cart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<circle cx="10" cy="28" r="2" fill="currentColor" />
<circle cx="24" cy="28" r="2" fill="currentColor" />
<path
fill="currentColor"
d="M28 7H5.82L5 2.8A1 1 0 0 0 4 2H0v2h3.18L7 23.2a1 1 0 0 0 1 .8h18v-2H8.82L8 18h18a1 1 0 0 0 1-.78l2-9A1 1 0 0 0 28 7Zm-2.8 9H7.62l-1.4-7h20.53Z"
/>
</svg>
<span>0</span>
</div>
<div class="action-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9s-9-4.032-9-9s4.032-9 9-9zm0 16c3.867 0 7-3.133 7-7c0-3.868-3.133-7-7-7c-3.868 0-7 3.132-7 7c0 3.867 3.132 7 7 7zm8.485.071l2.829 2.828l-1.415 1.415l-2.828-2.829l1.414-1.414z"
/>
</svg>
</div>
<div class="user">
<button class="btn-user">Login</button>
<div class="overlay">
<div class="module-overlay"></div>
<form action="" method="get" id="form-login">
<h2 class="name-form">Welcome</h2>
<input
class="input-login"
name="code-student"
placeholder="Email"
type="text"
/>
<input
class="input-login"
name="password"
placeholder="mật khẩu"
type="password"
/>
<input
class="input-login"
name="code"
placeholder="mã xác thực"
type="number"
/>
<button type="submit" class="submit-login">
Login
</button>
</form>
</div>
</div>
</div>
</div>
</header>
<main class="main">
<div class="banner">
<div class="slider">
<svg
class="icon-next icon-left"
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12.3 15.3l-2.6-2.6q-.15-.15-.225-.325Q9.4 12.2 9.4 12t.075-.375q.075-.175.225-.325l2.6-2.6q.475-.475 1.087-.212q.613.262.613.937v5.15q0 .675-.613.937q-.612.263-1.087-.212Z"
/>
</svg>
<svg
class="icon-next icon-right"
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.7 15.3q-.475.475-1.087.212Q10 15.25 10 14.575v-5.15q0-.675.613-.937q.612-.263 1.087.212l2.6 2.6q.15.15.225.325q.075.175.075.375t-.075.375q-.075.175-.225.325Z"
/>
</svg>
<div class="main-slider">
<div class="item-slider">
<img
src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt=""
class="image-slider"
/>
</div>
<div class="item-slider">
<img
src="https://images.unsplash.com/photo-1671726203382-8ea3393d7ad6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt=""
class="image-slider"
/>
</div>
<div class="item-slider">
<img
src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt=""
class="image-slider"
/>
</div>
<div class="item-slider">
<img
src="https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1262&q=80"
alt=""
class="image-slider"
/>
</div>
<div class="item-slider">
<img
src="https://images.unsplash.com/photo-1670272506152-6f2703532cd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt=""
class="image-slider"
/>
</div>
</div>
</div>
</div>
<div class="sale-flash">
<div class="wrapper-flash">
<h2 class="heading-flash">Flash sale</h2>
<div class="count-dow">
<div class="icon-flash">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7 2v11h3v9l7-12h-4l4-8z"
/>
</svg>
</div>
<div class="time-sale">30 : 00</div>
</div>
</div>
<div class="product-sale">
<div class="item-product-sale item-product">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://techtimesvn.com/wp-content/uploads/2023/02/Apple-MacBook-Pro-M2-Feature-Blue-Green.jpg"
alt=""
class="product-sale-img"
/>
<p class="product-sale-name">
Apple MacBook Pro review (13-inch, 2020): Easier to
recommend
</p>
<div class="wrapper-btn" id="1">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product-sale item-product">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://techtimesvn.com/wp-content/uploads/2023/02/Apple-MacBook-Pro-M2-Feature-Blue-Green.jpg"
alt=""
class="product-sale-img"
/>
<p class="product-sale-name">
Apple MacBook Pro review (13-inch, 2020): Easier to
recommend
</p>
<div class="wrapper-btn" id="2">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product-sale item-product">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://techtimesvn.com/wp-content/uploads/2023/02/Apple-MacBook-Pro-M2-Feature-Blue-Green.jpg"
alt=""
class="product-sale-img"
/>
<p class="product-sale-name">
Apple MacBook Pro review (13-inch, 2020): Easier to
recommend
</p>
<div class="wrapper-btn" id="3">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
</div>
</div>
<div class="wrapper-product">
<h2 class="heading-product">Sản phẩm</h2>
<div class="product">
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="4">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="5">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="6">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="7">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="8">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="9">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="10">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
<div class="item-product item-product-main">
<div class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"
/>
</svg>
</div>
<img
src="https://macstores.vn/wp-content/uploads/2023/01/macbook-pro-m2-pro-space-gray-5.jpg"
alt=" "
/>
<h3 class="name-product-main">
Max Option – MacBook Pro M2 Max 16 inch 2023 New – (M2
Max/96GB/8TB/Space Gray)
</h3>
<div class="wrapper-btn" id="11">
<button class="btn-action btn-action-buy">Buy</button>
<button class="btn-action btn-action-addCart">
Add Cart
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>*,
*:before,
*:after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
body {
min-height: 100vh;
font-family: 'Inter', sans-serif;
color: var(--color-text);
}
/* variable color */
:root {
--color-primary: #f77f00;
--color-text: #ffffff;
}
/* CSS Main */
.header {
background-color: var(--color-primary);
}
.wrapper-header {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.header .action {
display: flex;
align-items: center;
}
.action .action-icon {
margin: 0 10px;
position: relative;
cursor: pointer;
}
.action-icon:hover {
border-radius: 50%;
transform: scale(1.1);
color: #7400b8;
}
.logo .logo-name {
font-size: 20px;
font-weight: 500;
}
.logo-name::first-letter {
font-size: 35px;
font-weight: 800;
color: #248277;
text-shadow: 1px 1px 1px rgb(255, 255, 255);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.navigate .navigate-link {
color: var(--color-text);
text-decoration: none;
margin: 0 10px;
font-size: 18px;
padding: 5px 20px;
}
.navigate .navigate-link:hover {
border-bottom: 1px solid var(--color-text);
transition: border-bottom 0.2s linear;
}
.icon-cart {
display: flex;
align-items: flex-end;
}
.icon-cart span {
border: 1px solid;
padding: 0 5px;
border-radius: 50%;
}
.slider {
margin: 0px auto;
position: relative;
height: 500px;
overflow: hidden;
user-select: none;
}
.main-slider {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.4s ease-in-out;
}
.item-slider {
width: 100%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
}
.item-slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
.icon-next {
position: absolute;
z-index: 1;
font-size: 50px;
color: #fff;
background-color: rgba(128, 128, 128, 0.566);
border-radius: 50%;
cursor: pointer;
}
.icon-next:hover {
background-color: gray;
}
.icon-left {
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.icon-right {
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.sale-flash {
display: flex;
margin-top: 50px;
align-items: center;
}
.wrapper-flash {
margin: 0 20px;
}
.sale-flash .count-dow {
background-color: #f780002c;
color: var(--color-primary);
display: flex;
font-size: 40px;
padding: 10px;
border-radius: 10px;
align-items: center;
width: 230px;
}
.count-dow .icon-flash svg {
width: 60px;
height: 60px;
color: #ffbe0a;
}
.product-sale {
display: flex;
flex: 1;
}
.product-sale .item-product-sale {
margin: 0 20px;
width: 100%;
position: relative;
}
.item-product-sale .product-sale-img {
height: 230px;
width: 100%;
object-fit: cover;
border-radius: 20px;
}
.item-product-sale .product-sale-name {
font-size: 20px;
color: #000;
margin-top: 10px;
text-align: center;
font-weight: 500;
}
.icon-heart svg {
display: none;
}
.icon-heart-active.icon-heart svg {
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 35px;
height: 35px;
cursor: pointer;
}
.heart-active {
color: rgb(251, 60, 60);
}
.wrapper-btn {
display: none;
}
.wrapper-btn-active.wrapper-btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
display: flex;
width: 100%;
justify-content: center;
background-color: rgba(255, 255, 255, 0.89);
padding: 10px 0;
}
.wrapper-btn .btn-action {
padding: 8px 15px;
border: none;
border-radius: 3px;
font-size: 17px;
margin: 0 10px;
cursor: pointer;
}
.btn-action.btn-action-buy {
background-color: var(--color-primary) !important;
color: var(--color-text);
}
.btn-action.btn-action-addCart {
background-color: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.btn-user {
padding: 5px 20px;
border: none;
border-radius: 3px;
margin-left: 10px;
cursor: pointer;
}
.overlay {
display: none;
}
.overlay-active.overlay {
display: block;
position: fixed;
inset: 0;
z-index: 2;
}
.overlay .module-overlay {
background-color: rgba(0, 0, 0, 0.334);
position: absolute;
inset: 0;
z-index: 3;
}
#form-login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 7;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-primary);
padding: 30px;
border-radius: 20px;
}
#form-login .name-form {
font-size: 40px;
margin-bottom: 20px;
}
#form-login .input-login {
width: 270px;
height: 40px;
margin: 10px 0;
border-radius: 5px;
border: none;
outline: none;
padding: 10px;
font-size: 16px;
color: rgb(74, 74, 74);
}
#form-login .submit-login {
width: 100%;
margin: 20px;
height: 40px;
font-size: 20px;
border: none;
border: 2px solid #fff;
border-radius: 5px;
cursor: pointer;
color: #fff;
background-color: transparent;
}
.wrapper-product {
margin-top: 80px;
}
.heading-product {
color: #000;
text-align: center;
font-size: 40px;
}
.heading-flash {
color: rgb(27, 1, 59);
margin-bottom: 10px;
font-size: 30px;
margin-left: 5px;
}
.product {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.item-product-main {
width: calc(100% / 4 - 40px);
margin: 30px 20px;
position: relative;
}
.item-product img {
height: 250px;
width: 100%;
object-fit: cover;
border-radius: 20px;
}
.name-product-main {
color: #000;
text-align: center;
padding-top: 20px;
}const btnNext = document.querySelector('.icon-right');
const btnPre = document.querySelector('.icon-left');
const sliderMain = document.querySelector('.main-slider');
const widthSlider = document.querySelector('.slider').clientWidth;
const itemSliders = document.querySelectorAll('.item-slider');
btnNext.addEventListener('click', () => {
sliderShow(1);
});
btnPre.onclick = () => {
sliderShow(-1);
};
let positionX = 0;
let index = 0;
function sliderShow(direction) {
if (direction == 1) {
if (index >= itemSliders.length - 1) {
return;
} else {
positionX -= widthSlider;
sliderMain.style = `transform: translateX(${positionX}px)`;
index++;
}
} else {
if (index <= 0) {
return;
} else {
positionX += widthSlider;
sliderMain.style = `transform: translateX(${positionX}px)`;
index--;
}
}
}
const time_sale = document.querySelector('.time-sale');
let minute = 30,
second = 0;
setInterval(() => {
if (second == 0) {
second = 59;
minute--;
} else {
second--;
}
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
let timer = `${minute} : ${second}`;
time_sale.innerText = timer;
}, 1000);
const item_product = document.querySelectorAll('.item-product');
item_product.forEach((item) => {
item.addEventListener('mouseover', () => {
item.firstElementChild.classList.add('icon-heart-active');
item.lastElementChild.classList.add('wrapper-btn-active');
});
item.addEventListener('mouseout', () => {
item.firstElementChild.classList.remove('icon-heart-active');
item.lastElementChild.classList.remove('wrapper-btn-active');
});
});
const btn_action_buy = document.querySelectorAll('.btn-action-buy');
const btn_action_add_cart = document.querySelectorAll('.btn-action-addCart');
const icon_cart = document.querySelector('.icon-cart span');
let listCart = [];
btn_action_add_cart.forEach((element) => {
element.addEventListener('click', () => {
const checkAdd = listCart.includes(element.parentElement.id);
if (!checkAdd) {
listCart.push(element.parentElement.id);
icon_cart.innerText = listCart.length;
} else {
alert('Đã tồn tại trong giỏ hàng');
}
});
});
const icon_heart = document.querySelectorAll('.icon-heart');
icon_heart.forEach((item) => {
item.addEventListener('click', () => {
item.classList.toggle('heart-active');
});
});
btn_action_buy.forEach((item) => {
item.addEventListener('click', () => {
alert('Bạn cần đăng nhập mới sử đụng được chức năng này !!!');
});
});
const btn_user = document.querySelector('.btn-user');
const overlay = document.querySelector('.module-overlay');
btn_user.addEventListener('click', () => {
btn_user.nextElementSibling.classList.add('overlay-active');
});
overlay.addEventListener('click', () => {
btn_user.nextElementSibling.classList.remove('overlay-active');
});
const submit_login = document.querySelector('.submit-login');
const input_logins = document.querySelectorAll('.input-login');
submit_login.addEventListener('click', (e) => {
e.preventDefault();
input_logins.forEach((element) => {
if (element.name == 'code-student') {
const value = element.value;
if (!value.endsWith('@fpt.edu.vn')) {
alert('Đây không phải email cao đẳng fpt');
}
}
if (element.name == 'password') {
const value = element.value;
if (!value.startsWith('ph')) {
alert('Mật khẩu là mã sinh viên');
}
if (value.length < 7) {
alert('Độ dài tối thiếu là 7 ký tự!');
}
}
if (element.name == 'code') {
const value = element.value;
if (value.length < 6 && value.length > 6) {
alert('Code có 6 chữ số !!');
}
}
});
});Bây giờ bạn chỉ cần chạy, thay đổi dữ liệu cho hợp lý, sử lại theo mong muốn của bạn nhé.
Phần kết
Nếu bạn đang cần assignment thì chắc cũng sắp thì rồi đúng không, để qua được môn các bạn cần ôn kỹ các kiến thức của các bài lab mà mình đã đăng ở phần trước nhé. Và đây là toàn bộ code cho các bạn tham khảo nên chỉ sửa lại nhé, cần chỉnh chu thì liên hệ với mình.
Chúc các bạn vượt qua kỳ thi !!!
Cảm ơn bạn ghé thăm
Chia sẻ bài viết
Có thể bạn sẽ thích